Walkthrough #7 – Menus & Navigation
This article is part of a walkthrough series detailing how to build yourself a website, from scratch in less than 2 hours. To see each article in this series click here, or, for the full blog post, click here.
-
Editing your website navigation
Now we’ve created our 4 pages, you may wish to change the order and display settings of the menu, so let’s take a look at how to do that.By default, all new pages are added to the menu at the top of the page, but, Skizzar is incredibly flexible when it comes to creating menus and assigning them to locations on your website. We don’t need anything too fancy on this site, just a simple menu where we can control the order of menu items. From within the customizer, navigate to Menus on the left and click on Create new menu. Give your menu a name, we’re going to use Main Menu and assign it to the Header Menu location – this is the top of your website. Click on the Next button and you’ll be able to add new items to your menu.
Skizzar allows you to add in existing pages, blog posts, categories, custom links and may more page types to your menu. For this tutorial, we’ll keep it simple and add in our 4 existing pages; Home, About, Gallery and Blog. Each item that is added has some simple settings allowing you to change the title – so let’s go ahead and change the title of Gallery to Media. Lastly, let’s add in a custom link that will scroll down to the contact form. Click on Custom link, and in the URL, delete http:// and replace it with #contact. Next, in the label, type Contact and then add it to your menu.
You can re-order your menu simply by dragging and dropping items in the order you wish – so let’s change our menu order to be Home, About, Blog, Gallery, Contact.
It is possible to change the appearance of your menu by navigating to Header > Menu Styling in the main customizer menu. We’re a fan of uppercase menu text, so select Uppercase from the Text Transform dropdown under header menu styling.
