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.

In this 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. To get the correct custom css code, contact our support.

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:

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

3
Select 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.

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

1
From WordPress left menu go to Jupiter > Theme Options > Advanced > Custom CSS.
2
Add 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.

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

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

 

Was this helpful?

Related Topics

Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket