Day 17: Editing the Menu
IMPORTANT: Installing the theme should have created a primary menu already, but in case you need or want to add a new menu, we’ll start from scratch.
Go to Appearance > Menus.
Adding a New Menu or Editing an Existing One
Click on “Create a New Menu” near the top and give your menu a name. Choose a location as well, most likely the primary menu, which will show at the top of the website.
Go to the Pages sidebar on the lefthand side and check the page you want to add. Click “Add to Menu,” and then you can drag the added pages to order them however you like.
Dragging the page to the left a little underneath another page creates a submenu item.
You may want to go to “Custom Links” in the lefthand side bar to add links in your menu that are not pages on your website, like links to external websites.
Don’t forget to save your menu when you’re done.
After you do, go to the frontend of your site to see your new or edited navigation.
Make sure you can see the menu on all devices, tablet and mobile as well.
Creating a Primary Item with No Link
If you want the primary menu item to have no link, so it can just be a category title for the submenu items underneath, then create a custom link menu but use a hashtag for the URL instead putting a web address.
As you can see in the image below, the primary menu item in the Main Menu, “Learn” is not a link. It’s just a title to categorize all the submenu items below it.
Desktop & Laptop Menu vs. Tablet & Mobile Menu
If you want two different menus for the bigger and smaller devices, you will have to create two separate ones. You can call the menu for tablet and mobile “Mobile Menu,” for example.
For desktop and laptop, make sure you choose Primary Menu for the Display Location. But for tablet and mobile, make sure you choose Off-Canvas.
To change the placement of the toggle button for the menu on tablet and mobile, go to Appearance > Customize and then click on the device icon for tablet and/or mobile in the bottom righthand corner of the customizer panel.
Then click on Off-Canvas Menu in the primary header under the preview of the website.
You can drag and drop the toggle button, just like with the other elements in the header.
