Print Friendly, PDF & Email

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:

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

example website header bar

primary menu example

 

 

WordPress Footer:

Divi Footer:

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 Elements (Header & Navigation - Divi)

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.

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.

types of things found in a primary menu

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.

Deprecated: htmlspecialchars(): Passing null to parameter #1 ($string) of type string is deprecated in /srv/users/demo/apps/training-librarieswin-org/public/wp-includes/formatting.php on line 4715