Menu Basics in WordPress and Largo

Largo comes with five standard menus which you can assign to five theme locations, which are simply page areas where you can place the menus. It's important to understand the difference between menus and locations, and how they are created and managed in WordPress and Largo.

Let's start with the standard Largo menus:

  • Global Navigation
  • Main Navigation
  • Don't Miss (must be enabled in Appearance > Theme Options > Navigation)
  • Footer Navigation
  • Footer Bottom

These standard Largo menus are assigned by default to the five standard Largo theme locations named the same as the menus. You can assign any menu to any menu location, but there's rarely a good reason to mess with the defaults.

Largo menus are optimized for desktop computers, tablets, and smartphones. Their appearance and the way users interact with them will vary based on the device.

Menus Locations on a Desktop

The image below shows the menus when viewed on a desktop browser. Starting from the top:

  • Global Navigation in the black bar at the top
  • Main Navigation under the top image banner
  • the Don’t Miss menu just under the Main Navigation (you can change the name of Don’t Miss to something else in Appearance > Theme Options > Navigation
  • Footer Navigation at the top of the footer
  • Footer Bottom at the bottom of the footer

menu locations on the front end of Largo

Menus When Viewed on Mobile Screens

When viewed on mobile devices and small screen widths, the behavior of the top menus changes. The Main Navigation becomes a sticky menu at the top of the screen that disappears when the user scrolls down, and reappears on scrolling back up. Links in the Main Navigation are accessed in a "hamburger" dropdown menu icon:

sticky mobile menu in Largo

Touching or clicking on the hamburger icon opens the Main Navigation, which on mobile-sized screens also contains the Global Navigation. The Don't Miss menu is hidden:

sticky mobile menu open in Largo

These menus are consolidated to save space on mobile devices. When the user scrolls down the menu disappears to provide more screen space for reading. The menu reappears when the user scrolls up, to provide access to site navigation.

Navigation Options

By default, the sticky navigation bar is active on all pages for only mobile screen sizes. You can enable the sticky navigation for all screen sizes on article pages in Appearance > Theme Options > Navigation. You can also choose to hide the main navigation on article pages and display only the sticky navigation.

sticky nav settings

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

sticky menu viewed on an article page

Also note that if the Main Navigation contains so many navigational links that they would wrap onto multiple lines, the overflow links will display in a "More" dropdown menu instead of wrapping. If you wish you can change the label from "More" to whatever you prefer, in the Sticky navigation overflow label field.

Modifying Menus

You can change the five default Largo menus by:

More Menu Resources

See the Largo Project docs page on Menus for more, and also the WordPress Codex Menu User Guide.

Still need help? Contact Us Contact Us