Table of Contents
This Theme uses WordPress built-in menus feature which can be found in your WordPress Dashboard. Follow the next steps to define menus for each of the theme’s menu locations.
- Navigate to Appearance Menus page
- Click the Create a new menu link to make a new menu. Enter the name then hit Create Menu .
- To add a menu item, you can easily select one of your already made pages on the left hand side and click Add to Menu .
- You can also add menu items by entering a custom name and custom link into the Links box.
- You can manage your menus using the drag and drop functionality. To create a dropdown menu, simply drag a menu item below and slightly to the right of another menu item and it will lock into place and create a dropdown section.
- Save your menu. After that go to Manage Locations tab and set your created menu as Primary Menu (or other)
- Once its all done, make sure you click the Save button.
- You can change menus locations in any time from Manage Locations tab.
Please, don’t add a lot of positions to first level in main menu, because sometimes they can’t fit in one line.
Mobile Menu and Header
Our theme has additional functions for mobile header. First of all, you can find all Mobile header options in theme options – Mobile and AMP. Also, it’s available in Customizer.
In the same Place you can assign your custom logo in top of Mobile Sliding panel. You can also assign custom elements or text in top of sliding panel.
If you want to center your custom content – wrap it with next div
<div class="text-center">Your content</div>
If you want to make it with white color, use
<div class="whitecolor">Your content</div>
How to increase width of simple dropdown menu
By default, simple dropdown in menu has width 210px, you can increase this value with code
you can place this in theme options – general options – custom css
How to add links to footer bottom line
You can add also some links to bottom line in footer (with copyright text). To do this, go to Theme option Footer option Footer Bottom Text and add there next code.
2016 Wpsoul.com Design. All rights reserved. <div class="floatright mr30 ml30 mobilecenterdisplay disablefloatmobile"><a href="#" class="inlinestyle mr30">Disclaimer</a> <a href="#" class="inlinestyle">Contact Us</a></div>
Instead of # – place real links. floatright class means that links will be right floated.
How to add Right Float to menu
Easy. Enable Css classes for menu and add class floatright to menu item
How to add Icons to Menu
Please, follow next tutorial how to add icons in title
How to add additional menu in logo section
Go to Appearance – menus and create new menu, save it
Go to theme option – Header and Menu – Header layout and enable Customizable Header. Now you can choose your additional menu. Don’t add too much items in this menu
How to hide some menu items on mobile or desktop
The mobile menu is generated from your main menu. What if you want to have them different? There are many plugins for this, but here is a quick tip which is based on helper classes of theme.
First of all, enable Css class box in your menu items as we showed in the previous step about right float. Now, if you want to hide menu item on mobiles, add the next class to the menu item
This will hide item on all mobile gadgets including small tablets
If you want to do the opposite, use the next classes
This will hide menu item on desktop and big tablets