Create responsive menu items in Joomla with Bootstrap's CSS classes

I recently enabled responsive capability in one of my pro-bono sites using RocketTheme's Metropolis template. I made the requisite image size changes for the new larger max width layout, and I did a little customization using media queries to make sure my showcase resized nicely. 

One area where I ran into trouble was with the very nice JEvents extension, which I had previously used to display a monthly calendar layout in my fixed-width site. Obviously a monthly view has a column for each day of the week, each of which must be wide enough to show event titles, etc. I found that the 7-column table didn't want to shrink far enough to fit within the site's layout below Gantry's 768px breakpoint. I decided that I wanted to make the monthly calendar view the default for tablets and larger, and to show a weekly view for phones. 

Joomla 2.5+ uses Twitter's Bootstrap JavaScript/CSS library, which provides a set of utility CSS classes for showing and hiding content based on screen size. To show one menu item for phones, and another for tablets and PCs, here's what I did:

  • Create a menu item for screen sizes smaller than 768px and point it to your article or view.
  • Give it a CSS class of 'visible-phone'. In a RocketTheme template, this field is provided in the appropriate menu type options (Dropdown or Splitmenu).
  • Create a menu item for larger screen sizes pointing to that article or view.
  • Give this item a CSS class of 'hidden-phone'.

It may be helpful to add reminders using the Note field on these menu items that they'll only display in some cases. 

Now my visitors see a monthly calendar layout on tablets, larger phones and desktops, and they see a weekly view on phones, which fits much more nicely in the available width. All users see a useful calendar view. 

To create menu items for phone/tablet and PC, use the classes .hidden-desktop and .visible-desktop, respectively.