Main Navigation Styling (Theme Options > Header)

Last Updated on

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.

x
Note: This article is intended only for the styling of the header, to learn more about header settings, check out the articles in the header category.

Main navigation styling theme options - menu

x
Note: To learn more about header types and how to configure them, check out the Configuring the header type article.

1
Header Main Navigation Hover Style.  

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

x
Beware! Please note that hover style 5 does not work in header style 4.

Main navigation styling theme options - top level settings

 

2
Container Background Color.  

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

x
Note: This option works the best with header style 2.
3
Top Level Text Color.  

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

4
Top 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.

5
Top 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.

6
Sub Level Box Width.  

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

7
Sub 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.

8
Sub Level Background Color.  

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

9
Sub Level Text Color.  

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

10
Sub 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.

11
Sub 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.

12
Sub 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.

13
Mega 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.

14
Sub 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

 

15
Sub Level Box Border Color.  

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

16
Mega 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.

17
Responsive 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.

18
Responsive 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.

x
Note: Settings above will not work if the transparent header is enabled. For this, custom CSS needs to be written which will override this.
Was this helpful?

Related Topics

Related Forum Topics

Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket