I'm going to demonstrate how to update the menus on your website. Menus are usually found on the header and footer of your site, but your site may have many different menu types and locations based on your site's design and content needs.

For demonstration purposes, I'm going to use the primary navigation up here today, as well as demonstrating how to set dropdown menus like this. To edit your menus, you'll go to your backend and then go to appearance and menus in the left hand sidebar. Once you see this screen, you can use this dropdown menu with a top to select which menu you want to edit.

To add pages to your menu over here, under “add menu items,” you can go to pages, where you'll see your most recent pages. You can view all pages or you can search for a specific page. If I search for the contact page, for example, you'll see a few of these pages show up. I will select this one and then add to menu. Once the page has been added to the menu, you'll see it down here at the bottom of the list of pages. Once it's there, you can click and drag it to add it to the spot in the menu where you want it to live. If you wanna create a new dropdown menu, you can drag this under the page that you want to be the parent page and indent it slightly.

In addition to adding pages to your menus, you can also add custom links. To do that, you can go over here under custom links and add in your custom link. This is usually used in your secondary navigation for things like social media links or offsite login links. To demonstrate, I will add “example.com” and some link text, and then click “add to menu.” Once you've added this to your menu, you can use this just like any other page in your navigation and drag it to where you want it to live.

To remove pages from your menu, simply expand to the menu item and click remove. I will do this for my contact page that I added as well on our theme and Divi websites.

If your website has a main and secondary navigation like this one does, the mobile menu requires a bit more configuration to ensure that the mobile menu is accessible. You'll see here that contact and blog are links in the secondary navigation but also appear in the main menu. If I go back here, this is our contact page and you here's our blog. This is done with a special CSS class. So if I expand this contact page, you can see it says “mobile-only”, and same for the blog right here. If you'd like a link in your secondary navigation to appear on the mobile menu, you will add the link here and you must add this mobile only CSS class, or it will appear in the main navigation. To demonstrate what I mean, I'm going to remove this “mobile-only” class from our blog page and then save and then go to the front end and refresh. See that our blog now appears in the primary navigation because we no longer have the mobile only class applied to that menu item.

Your site might also have a mega menu. If that's the case, there are additional instructions for that in your websites, how-to document.