TTG Tips and Tricks

Currently we cannot assign one navigation menu to desktop displays and another to mobile devices.

If you have a lot of albums on your site,  they’re probably organized into nice and neat album sets that are reflected in the drop-down menu displayed on desktop sizes of your site. Because there are a lot of albums, this may pose a mobile menu usability problem.

Your desktop menu is designed so that visitors can use the drop-down menu to navigate to any album from your navigation menu by hovering over menu items and seeing the sub-items appear. And this looks great on a desktop display.

However, try looking at the mobile menu. Under the Galleries menu item you’ll see a long, long list of albums and sets. All your other links might get lost in this forest of links. And if you have any “side bar” content in the pallet, it gets shoved below the mobile navigation menu making for potentially a long scroll for your users (who may actually never see that content because it’s buried so deep).

Wouldn’t it be nice if you could remove all those sub-menu items from your mobile menu, just to neaten things up a bit? Sure, your viewers would have to tap on the Galleries link to go to your Galleries page and then on from there to individual albums, but it’s a small price to pay to get your mobile menu under control.

This is not too difficult to do with custom css.

What we can do is suppress all of the sub-menu items by adding this bit of code to your custom css file:

#page__pallet__T1 ul.sub-menu {
     display:none;
}

(NOTE: I’m using Pallet 1 for the vertical/mobile navigation. If you’re using Pallet 2, then substitute #page__pallet__T2 for #page__pallet__T1)

But let’s say you have some important sub-menu items under another main menu item and you want them displayed.

For example, on my main site I use a Non-interactive menu item (named Info) in my main menu that contains sub-menu items that need to be in the mobile menu.

In this case, I’ll use the nth-child( ) pseudo-selector and only suppress the sub-menu items below the Galleries link, leaving the sub-menu items under my Info link displayed in the mobile menu.

In my menu, Galleries is the third item. So I’ll use the nth-child(3) pseudo selector.

This is what I came up with:

#page__pallet__T1 li.menu-item:nth-child(3) > ul.sub-menu {
     display:none;
}

Just modify the nth-child number for your needs.
If you need to suppress more than one sub-menu, just add another selector with the appropriate nth-child number. For example, say you need to suppress the sub-menus in the third and forth menu items.

#page__pallet__T1 li.menu-item:nth-child(3) > ul.sub-menu, #page__pallet__T1 li.menu-item:nth-child(4) > ul.sub-menu {
     display:none;
}

This assumes you’re using horizontal navigation for the desktop version of your site.

If using vertical navigation, you’ll need to put the above in a media query so that it only takes effect when the browser size is of mobile width.

For example, you want your complete vertical navigation to show on desktop displays and tablets in landscape orientation. But you want the mobile menu to be displayed on tablets in portrait and anything smaller than a tablet.

@media only screen and (max-width: 768px) {
     #page__pallet__T1 li.menu-item:nth-child(3) > ul.sub-menu {
     display:none;
     }
}

You can adjust the media query width as needed for your purposes.

That’s it. Just a little bit of custom css and your Backlight mobile menu has been tamed!