With the rise of mobile devices, optimizing navigation for small screens has become essential. Largo 0.5.4 introduced a new sticky navigation bar that improves the user experience by reducing the screen space occupied by the Main Navigation menu, while still providing highly usable site navigation. The sticky navigation disappears when the user scrolls down the page and reappears when scrolling back up.

See the Menu Basics page for more on how menus work in WordPress and Largo.

You’ll find the settings discussed on this page in Appearance > Theme Options > Navigation.

By default, the sticky navigation bar is active only for mobile screen sizes. You can choose two additional options:

  • Enable the sticky navigation for all screen sizes on article pages
  • Hide the “non-sticky” main navigation on article pages and display only the sticky navigation

Theme Options for Navigation

If both options are checked for article pages the menus appear like this:

sticky menu on an article page

Note that if you hide the non-sticky main navigation on article pages, any content above the navigation such as a banner ad will not be displayed. Users entering the site will see only the sticky nav bar at the top with a small site logo and the navigation links.

Sticky navigation overflow

If the menu assigned to the sticky navigation has so many top-level links that it would have to wrap onto multiple lines, a drop-down menu will be added containing the links that would wrap. Enter a label here for the drop-down menu, which defaults to “More.”

Also of note – If you have assigned a menu to the Global Navigation theme location, the sticky navigation will include that as a drop-down menu to the right of the sticky nav menu links. The name of the dropdown will be the name of the menu.

Alternate site name for sticky navigation

If your Site Title is too long to display the entire title in the sticky header, the title will be truncated and appended with ellipses, e.g. “Midwestern Institute for News…” You can add an abbreviation or shorter Alternative site name here to take the place of the full Site Title. Also note that if you upload a 100px-tall Sticky Header Logo in Appearance > Theme Options > Theme Images, the logo will display in the sticky header instead of the Site Title.

Menu Options

Don’t Miss Menu

Under the main navbar on your Largo site is an optional secondary navigation menu that, by default, is called “Don’t Miss”. To enable this menu, make sure the checkbox to show the Don’t Miss Menu is checked. Optionally, you can customize the label that appears at the beginning of the menu or remove it entirely. To add or remove links from this menu visit Appearance > Menus from the left sidebar in the WordPress administration interface.

The Don’t Miss Menu will display on desktops, but is hidden on screen widths of 768px or narrower, e.g. phones and many other mobile devices.

Footer Nav Menu

On the left side of the site footer is a configurable menu area. By default, the label for this menu will be your site name, but you can change it here. As with the Don’t Miss menu area, to add or remove links from this menu visit Appearance > Menus from the left sidebar in the WordPress administration interface.