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
Use this option to set the hover style for the main navigation.
Use this option to put the main menu section into a colored container.
Use this option to set the text color of top level menu items.
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.
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.
Use this option to set the width of dropdown box of the main menu. This option value is in pixels.
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.
Use this option to set the background color of dropdown box.
Use this option to set the text color of sub level menu items.
Use this option to set the text color on mouse over of sub level menu items and the color of current sub menu item.
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.
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.
Use this option to set the title color for the menu in Mega Menu mode. Fore more information about mega menus click here.
Enable this option to add a shadow to drop down box of the menu.
Use this option to set the birder color of drop down box of the menu.
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.
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.
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:
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.
.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.
Your menu item should differ from other items in the menu now.
