TTG Tips and Tricks

Here’s a quick tip for those wanting to center their collapsed menu icon on mobile devices.

When using mobile devices, your navigation menu collapses to a mobile friendly size and an icon with three horizontal lines appear on the left side of where your navigation once was. Click on this icon and the mobile navigation menu appears. This keeps the page nice and neat for your viewers.
What appears depends on your settings, if using the “Natural” Mobile Navigation Type, your navigation items will appear regardless. So this applies if you’ve chosen “Collapsible” or “Naturally Collapsible” as your Mobile Navigation Type.
Did you know that you can change the three bar icon (some call it the “hamburger icon”) to text. I often change it to simply “Menu.” Do this in Site Info > Navigation Container> Navigation Items: Menu Label When Collapsed.

Likewise, an icon with four horizontal bars can appear on the right hand side of the menu bar depending on your block settings. Clicking on this icon collapses or expands the block area. But either way, the navigation menu icon will always be on the left.

Some who have selected a block option that disables the block icon would prefer it if the collapsed menu icon would be centered rather than left aligned. This can be accomplished with custom css.

Here’s the code (CE3 only) that should work:

ul.etabs li {
float: none;
margin: 0 auto;
}