STUDENTS
arnold on Sep 28, 2018
Introduction To WordPress Menus
One thing we need to do with our websites is create menus for easy navigation. Also, since the menu is one of the first thing a website visitor sees, we want to make the website look as nice as possible.
In this tutorial I will show you:
– How to manage WordPress Menu locations
– How to add pages to a WordPress Menu
– How to add WordPress menu options if you don’t have a page.
– How to change the font and colors on a WordPress Menu
– How to access the WordPress Menu Options
– How to change the look of Themify menu’s and headers for the site and individual pages.
You Can Watch The Following Video To See How I Make Menu Changes In WordPress And Themify:
How To Create A WordPress Menu:
First, go to your WordPress dashboard.
Then go to APPEARANCE -> MENUS.
At the top you should see EDIT MENUS and MANAGE LOCATIONS. We are going to go to MANAGE LOCATIONS first. Your website could have multiple menus so we need to find your main menu and see which menu is loaded on there.
From the screenshot above I can see that in my main navigation, the MAIN NAV menu is loaded. Now I will click on EDIT MENUS so I can edit MAIN NAV. However when I click EDIT MENUS I see that my main Nav has a too much demo content loaded.
I could delete these one by one but that would take to long. So, I am going to just create another menu really quick.
Creating A New Menu In WordPress
In EDIT MENU click CREATE A NEW MENU
Give it a name and then click CREATE MENU
Now we can now add items to our menu.
For this example I just want a Home Page link, a blog post link and a gallery link as a sub menu option. To do this I will select Blog and Gallery and click ADD TO MENU.
This will add the two option to my menu. Since I want gallery as a sub-menu I will drag that to the right of blog
The next thing I am going to do is add a homepage button. I could find the home button and drag it over but I am going to just make a custom link really quick. With a custom link, if I wanted to link to another website from my menu or do a deep link into my website I would normally use a custom link. For now I will just use it to create a quick Home page button.
Click on CUSTOM LINKS
Add your URL to the URL box.
Give your Button a name with LINK TEXT.
Click ADD TO MENU.
It will now be in your menu. Drag it to the top which is where the home button will usually go.
Then click SAVE MENU
Now we need to load our new menu into our Main Menu. To do this click MANAGE LOCATIONS. The load your new menu as shown below and click SAVE CHANGES.
You will now see a beautiful new menu with a drop down gallery.
Changing The Fonts And Colors Of Menus
If you are working with your personal website and you have the main template we worked on there is a small chance you may not see the menu. It is there, but it is white font on a white background.
My menu does not show but if I hover over it, I can see it as shown below.
To Fix this, or to just change our menu styling to look better we need to work with the WordPress customizer.
To get there click on CUSTOMIZE at the top of the screen.
That will open a side menu of options.
Click on MAIN NAVIGATION
Then MENU LINK
Then change color at the bottom the black. You can change the numbers or drag the color bar when it opens. At the top your menu should be black.
Then Click PUBLISH.
There are a lot of options you can work with here for your menu. The menu below shows some of the more common features that I work with frequently:
Once we have a menu we can do several things to make it look different. The first place where we can change the menu is in the EDIT PAGE option. Click on EDIT PAGE at the top.
Scroll down to your THEMIFY CUSTOM PANEL.
Then click the PAGE APPEARANCE TAB
Then look for HEADER DESIGN.
This tab will change the main layout of your header. This will change it on this page only. If you want to change the menu for the entire website (which you should) go to THEMIFY ULTRA on the sidebar and Then THEMIFY SETTINGS.
From the screenshot above you can see all the different layouts for the menu. Click on different ones to play with those. Click on UPDATE at the top after selecting one and then load your website to see the changes.
