Website menus

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.

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.

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.

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.

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.

​

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.

There are two types of footer menus for a WordPress + Divi website:

• WordPress footer
• Divi footer

The WordPress footer usually appears as a black bar across the bottom of the site with simple text links. Not all websites have this menu.

The Divi footer is much more common and usually contains information like a logo, library address/phone/email, open hours, and possibly a map. 

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.

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

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.

We are migrating websites to using the Divi Global Footer as part of the Divi Theme Builder as a best practice. 

By using the theme builder, there is less risk of an accidental change on a single webpage wiping out an global footer across an entire website. 

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

To determine if you have this type of footer and to learn how to update it, read Update Global Footer – Divi Theme Builder