Create responsive menu items in Joomla with Bootstrap's CSS classes
- Details
- Category: Code
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.
