Main Navigation Styling (Theme Options > Header)

Updated on January 2, 2019

Theme Options is the main section of Jupiter, which you can do your global settings for your website. You can access Theme Options from top left side of your dashboard. We are going to describe about Main Navigation Styling options available under Header section of Theme Options in this article.

Main navigation styling theme options - menu


Main Navigation Styling

1Header Main Navigation Hover Style.  

Use this option to set the hover style for the main navigation.

Main navigation styling theme options - top level settings

 

2Container Background Color.  

Use this option to put the main menu section into a colored container.

3Top Level Text Color.  

Use this option to set the text color of top level menu items.

4Top Level Hover & Current Skin Color.  

Use this option to set the hover and skin color of top level menu items. The shape of hover will be different depending the style you will choose in item 1.

5Top Level Hover & Current Text Color (Hover Style 3 & 4 Only).  

Use this option to set the current menu item color for hover style 3, and current menu item text and hover color for hover style 4.

6Sub Level Box Width.  

Use this option to set the width of dropdown box of the main menu. This option value is in pixels.

7Sub Level Box Border Top Color.  

Use this option to set the color of top border divider of each sub level menu item. If you don’t want the divider set this option to blank.

8Sub Level Background Color.  

Use this option to set the background color of dropdown box.

9Sub Level Text Color.  

Use this option to set the text color of sub level menu items.

10Sub Level Text Hover & Current Menu Item Color.  

Use this option to set the text color on mouse over of sub level menu items and the color of current sub menu item.

11Sub Level Icon Color.  

Use this option to se the color of sub level menu item icons. This option is applicable if you set an icon for your sub level menu items from Dashboard > Appearance > Menus.

12Sub Level Hover & Current Menu Item Background Color.  

Use this option to set the background color of sub level menu items on mouse over and the background color of current sub level menu item.

13Mega menu title color.  

Use this option to set the title color for the menu in Mega Menu mode. Fore more information about mega menus click here.

14Sub Level Box Shadow.  

Enable this option to add a shadow to drop down box of the menu.

Main navigation styling theme options - sub level settings

 

15Sub Level Box Border Color.  

Use this option to set the birder color of drop down box of the menu.

16Mega Menu column Vertical Divders Color.  

Use this option to set the color of vertical dividers inside dropdown box in mega menu mode. If you don’t want those dividers set this option to blank. Fore more information about mega menus click here.

17Responsive Navigation Background Color.  

Use this option to set the drop down box background color of the menu in responsive mode. This option can be found in Theme Options > Header > Mobile Header.

18Responsive Navigation Text Color.  

Use this option to set the text color of menu items in responsive mode. This option can be found in Theme Options > Header > Mobile Header.


Styling Specific Menu Item

If you want to style some menu item differently, you need assign a custom class name for it. Follow the steps below:

1From WordPress left menu go to Appearance > Menus.
2From the Screen Options menu at the top, tick CSS Classes option.

3Select the menu which you want to edit and open the menu item to which you want to assign a custom class name and add any class name in CSS Classes field.

4Click on Save Menu button.

Once the class assigned, you can apply custom css code for that menu item.  Let’s say you want to change font color for it.

You need add custom css code using your custom class name.

1From WordPress left menu go to Jupiter > Theme Options > Advanced > Custom CSS.
2Add this css code in Custom CSS section:

.custom-item a {
    color: red !important;
}

Where .custom-item is your custom css class assigned to the menu item in Appearance > Menus.

Don’t miss the dot at the beginning of the class name in your code.

Change color value to any you want.

3Click on Save Settings button.
4Check the changes on the frontend.

Your menu item should differ from other items in the menu now.

 

Did this answer your question?