4.2 Main Navigation

Click on image to enlarge
Click on image to enlarge

Under Candidate Options > Main Navigation you will be able to set all color options for site’s main navigation.

Menu Area

Before anything else, you should set which menu will be located in this area. Go to Appearance > Menus. Let’s presume that you have menu entitled ‘Site Pages‘ which you want to show in this area.

There are two ways to accomplish this:

A) click on tab entitled ‘Edit Menus‘ and from menus dropdown select your menu (Site Pages). Below menu items is located section entitled ‘Menu Settings‘. Please check box labeled ‘Main Navigation‘ and your menu will appear in site’s main navigation area:

menu-settings

 

B) Candidate includes two menu locations:

  1. Main Navigation
  2. Footer Navigation

and they are listed under tab entitled ‘Manage Locations‘. Click on this tab and beside each of these two menu areas you will have dropdown with all menus created on your site (very helpful on sites with dozen of menus). Select ‘Site Pages‘ and hit ‘Save Changes‘.

Color Settings

Candidate Options > Main Navigation 

nav-bckgYou will be able to set navigation background and to choose from list of 20 seamless patterns for its background image (it will be repeated).

If you want to include your own image in list of predefined patterns, than you should put it in folder images/patterns. There are no requirements regarding image dimensions. Just make sure not to have spaces in the file name (change each space with underscore: i.e. my_custom_pattern.png)

 

nav-typography

 

  1. Main Navigation Typography controls typography of main navigation.
  2. Main Navigation Links Color controls only color of top level links (it will be overwritten in dropdown with appropriate color settings)
  3. Main Navigation Links Padding defines space between items in navigation’s  top level
1 - hover state 2 - regular state 3 - item spacing
1 – hover state
2 – regular state
3 – item spacing

– dropdown settings –

nav-dropdown

  1. Dropdown Links Color defines color of links in dropdown items (it will overwrite default settings for main navigation links)
  2. Dropdown Links Padding defines padding for EACH dropdown item
  3. Dropdown Background Colors defines background colors for regular/hover state (check image below)

nav-dropdown-explanation

 

  1. this item shows regular link color and regular background color for dropdown item links
  2. this item shows hover/active link color and hover/active background color for dropdown item links

Theme Blossom

We are a small creative team specialized in creating elegant designs and effective WordPress themes. You can get our free help on our support site