Website menus

Jump to Video

Menus are the key elements that allow a user to navigate your website. WordPress/Divi offer three menu options, but we generally only use two of them. These can be edited through both WordPress OR the Divi theme. More than likely your menus will be managed through the WordPress editor.

In addition, there are three areas where a logo may be displayed: on the browser tab (site identity), in the primary (dropdown) menu, and in some footer menus. Changing a Logo is covered in this post.

Your website design may vary – yours may use some alternative designs for menus or some global options. Send a ticket for assistance in reviewing the design of your specific website.

This article covers:

Understanding and identifying menus on your website (listed from top down on a webpage).
Understanding what edits and adjustments can be made to your menu using the WordPress vs. the Divi theme editor.

Note: there is a “Manage with Live Preview” editor option as well as a standard editor option. This tutorial will focus on the standard editor – my advice is to have your live website open in a second tab so you can manipulate the menu on one tab and refresh to see changes on the other. Once you are comfortable with how the menu structure works, you can try the “Live Preview” version.

Header & Navigation

The top of your webpage has two spaces for header information which includes the header elements area, and the Primary (dropdown) menu area. While technically the header elements aren’t a “menu” they do occasionally need to be updated and can be tricky to get at.

Header Elements (Divi Theme)

While technically not a “menu,” the header elements that appear at the top of many library websites do occasionally need to be changed.

This area is part of the Divi Theme, so needs to be accessed through the Divi Theme Customizer, accessed in the lefthand menu on the dashboard.

This customizer. Next click on “Header & Navigation.”

Next select Header Elements

Now you can update the information on the top header bar of your website:

Note: this screen does show a live preview of the changes you are making on your websie.

Primary (dropdown) Menu

The Primary Menu is the menu found at the top of most websites and usually includes “Home,” “About,” “Programs,” etc. As you move your mouse across, the menu drops down to display more links.

On a mobile device, this menu is commonly referred to as the “hamburger” menu and appears as 3 lines that open when tapped:

The Primary menu is (usually) accessed through the WordPress “Appearance” item on the lefthand side of the dashboard:

Depending on your website design, you may have an option to select a menu to edit. If your site only has the primary menu, you won’t see this option.

The full menu editor will display all of the items in your Main/Primary/dropdown menu, in order top-to-bottom as they appear left-to-right on a desktop, or top-to-bottom on a mobile device. The indented items are sub-items and will drop down further or appear indented. It is possible to stack menu items many layers deep, but this is not recommended as it is very hard to navigate. Use at most two sub items deep.

From here menu items can be dragged and drop to reorder.

Adding items to the Primary (dropdown) Menu

The Primary (header/dropdown) menu is not limited to linking just to other pages on your website. On the right side of the “Edit Menus” screen, under “Add menu items” there is a toggle with the different items that can be linked: Pages, Posts, Custom Links, Categories.

95+% of the time we will be linking to other internal website pages. However, you can create a link to an outside website by filling in that website under “Custom Links” (example, linking to the discovery catalog):

Or even create a link to all posts in a category:

When you add an item from the list on the lefthand side, it will automatically be added to the bottom of the primary menu list. From there you can drag and drop it – or follow the click the down arrow carrot on the right side of the bar and select the links to move the widget box.

Removing items from the Primary (dropdown) Menu

Huzzah, you have survived summer reading!

Many websites have a webpage dedicated to their summer reading program. At the end of the summer, you likely will want to remove this page and store it away until you start updating it next spring. Good news is you don’t need to delete this page – you can simply remove it from the dropdown menu.

Open the Primary Menu editor, staring in the dashboard:

Now find your Summer Reading page widget box.

And click the down arrow on the righthand side and click “Remove.”

Make sure to save your menu changes, and Summer Reading is gone from your website.

Remember, the page is not gone – and it can easily be added back to your menu simply by selecting it from the list on the lefthand side again and moving it to the place you want it.

Changing the Logo in the Primary Menu

Your library has a new logo – congrats! Now you need to update that logo on your primary menu.

Follow this link for instructions on how to change the logo in your primary menu.

Secondary Menu (not used)

Historical note: secondary menus have generally fallen out of fashion and are rarely used today (other than commerce sites or, like our online catalog sites, sites that use some sort of filtering option). They were the “sidebar” menus that were replaced by drop-down menus to reduce the amount of scrolling necessary and to make websites more accessible on phones and tablet screens.

They were very common in the early 2010s. Here’s a screenshot of a 2013 version of the www.demmerlibrary.org website with a primary and secondary menu, before drop-down menus became a thing:

(Image credit: https://web.archive.org/, aka Wayback Machine)

WordPress and Divi do offer the option of a Secondary (sidebar) menu on your website, but they are not part of our standard design set.

Footer Menu(s)

The only true footer “menu” is a WordPress footer, and not all websites use this menu. To some degree, some websites may use their Divi footer as a menu of sorts, so those areas are included here.

WordPress Footer Menu

A WordPress Footer Menu will appear as a bar at the bottom of your webpage. Not every library website has this.

This menu is managed through the Appearance link on the WordPress Dashboard:

If your site has this menu, you will be able to select it from the dropdown menu at the top of the editor.

This behaves the same way as the Primary Menu editor, where you can add items such as Pages, Posts, Custom Links, Categories, and drag them into your desired order.

Global/Persistent Footer

Again, not a true menu, some library footers contain links that behave like a footer menu.

A Persistent/Global Section footer is easily identifiable by the bright lime green color on either the backend or visual builder.

Editing this footer is simple – it behaves exactly as any other Divi module would, the only difference is once a change is made to that green section, it will automatically appear on any page that contains that same global section across the website.

Divi Theme Global Footer - ADVANCED

Again, not a true menu, some library footers contain links that behave like a footer menu.

A Divi Gobal Footer not common on Libraries Win websites, but it’s possible there is one floating out there.

The global footer behaves somewhat similarly to the Persistent/Global section, but it is accessed in a completely different way and it applies to more places on a website. This https://training.librarieswin.org website uses a Global Footer because this site depends more heavily on posts that behave like pages and need a footer on them.

A global footer is added through the Divi Theme Builder Menu and is added to a website template.

Use of this footer is an advanced skill, and would only be helpful in limited circumstances.