2. Home
  4. ReHub Theme
  6. Basic settings
  8. Setting menus

Setting menus

Basic Settings

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.

  1. Navigate to  Appearance   Menus  page
  2. Click the  Create a new menu  link to make a new menu. Enter the name then hit  Create Menu .
  3. 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 .
  4. You can also add menu items by entering a custom name and custom link into the Links box.
  5. 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.
  6. Save your menu. After that go to Manage Locations tab and set your created menu as Primary Menu (or other)
  7. Once its all done, make sure you click the  Save  button.
  8. 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

nav.top_menu ul.sub-menu{width:250px}

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

hideontablet

This will hide item on all mobile gadgets including small tablets

If you want to do the opposite, use the next classes

desktabldisplaynone

This will hide menu item on desktop and big tablets