As you probably known when using a menu, every menu has 3 common elements:
- Menu Bar: the bar is where to display your menu on your site.
- Top Menu: the item display on the Menu Bar, also those are the top-level items of your menu.
- Sub Menu: the sub-level items, usually, the sub menu will be display when you hover on the parent item. You can have multilevel of sub menu, based on how deft is your men.
Also with each menu item, either Top Menu item or Sub Menu item, there is two states:
- Normal state: when the item is display normally.
- Hover state: when the mouse hover on the item. Also on the mobile device, this is when the hand ‘tab’ on the item.
Base on that common knowledge, we defined our styling options to five sections:
- Menu Bar
- Top Menu
- Top Menu Hover
- Sub Menu
- Sub Menu Hover
In each section, you have many (may be too many) options for styling your menu. Those options are ranging from basic style like background, height, font… to the advanced style like: box-shadow, text-shadow…
This section contain various styling options for your Menu Bar, those are options like height, border, background or shadow…
Before you start settings, please see this picture for better understanding about the Menu Bar styling:
You’ll see the options for Menu Bar like on this picture:
- Menu Bar Height: As the name suggest, this option let you set the height of your Menu Bar.
- Border: This box let you specify the style and color of the Menu Bar’s border. Our setting follow the standard styling of CSS. For more information, please check the w3schools.com
- Border width: this is used to set the width of the border. It ranges from 0 to 20px.
- Border style: this option specifies what kind of border to display.
- Border color: pick the color you want for the border.
- Border position: allow you choose which side(s) to create border, you can choose one or many from Top, Right, Bottom and Left.
- Corner Radius: this option for creating rounded corners for your menu. The value ranges from 0 to 100px, showing the corner from tiny rounded to near circle rounded.
- Background: this is the background for your Menu Bar. You can choose one Static color for flat style menu or Gradient colors for 3D-like menu.
- Tip: the background color has transparent value so if you want your Menu Bar to be transparent (for using your theme’s Header background), you can set the maximum transparent to hide this background.
- Menu Bar Shadow: these options allow you to create the blur shadow for your Menu Bar. The shadow is introduced with CSS3 and you can find more details about it on w3schools.com.
- Horizontal Length: the position of the horizontal shadow. It ranges from -20px to 20px, allows you to create shadow from left to right side.
- Vertical Length: the position of the vertical shadow. It ranges from -20px to 20px, allows you to create shadow from top to bottom side.
- Blur Distance: The blur radius defines how big and how much blurred the shadow is. The larger this value, the lighter the shadow. This value ranges from 0 to 100px.
- Size of Shadow: this is size of the shadow meaning how far you want your shadow spread. It ranges from 0 to 100px.
- Shadow color: choose color for the shadow.
- Padding: the padding is the space around the content (inside the border) of an element (in this case, it’s the Menu Bar). Normally, you can set the space of all forth sides of your menu Bar but we limited it to Left and Right because the Top and Bottom is automatically calculated. For more information about the padding, please see the w3schools.com.
- Margin: the margin is the space around an element (outside the border). Like Padding, we limited the margin to Left and Right because the Top and Bottom is automatically calculated. For more information about margin, please see the w3schools.com.
This section contains the options for styling all the top level items of your menu.
Like with Menu Bar, please look at below picture for better understanding about the Top Menu styling:
You’ll see the options for Top Menu like on this picture:
- Top Menu Height: here you can set the height and the vertical position of the Top Menu items.
- Height: The height of Top Menu items, this option will automatically get the maximum value from what you set on Menu Bar Height.
- Top Menu Vertical Position: if the height of the Top Menu is smaller than the total height of Menu Bar, you can change the relative position of the Top Menu by changing this option.
- Border: this is similar to the Border of Menu Bar, the only different is that it’s for all the items of the Top Menu.
- Corners Radius: this is similar to the Corners Radius of Menu Bar.
- Font: here you can set the font style, font weight and font color of the Top Menu items. You can choose your font from the top 30 popular Google web fonts. For more information about font styling, please see the w3school.com.
- Font: choose the font family for the Top Menu items. If you want to know how each family looks like, please see the Google web fonts site on above link.
- Font style: The style of this font, normally, this option is used to specific italic text.
- Font weight: The weight of your font, specify how thick or thin characters in text should be displayed. Depend on the font family you choose, there’ll be different set of Font weight but all fonts should support regular and bold weight.
- Font size: The size of your font, you can select from 0 to 100px but the right value should be from 8 to 24px.
- Font color: the color of the menu text.
- Use UPPERCASE: if you check this checkbox, your menu text will all be transform to UPPERCASE.
- Text Shadow: these options help you attaches shadow to the text of Top Menu items. The text shadow is introduced with CSS3 and you can find more details about it on w3schools.com.
- Horizontal Length: the position of the horizontal shadow. It ranges from -20px to 20px, allows you to create shadow from left to right of the text.
- Vertical Length: the position of the vertical shadow. It ranges from -20px to 20px, allows you to create shadow from top to bottom of the text.
- Blur Distance: The blur radius defines how big and how much blurred the shadow is. The larger this value, the lighter the shadow. This value ranges from 0 to 100px.
- Shadow color: choose color for text shadow.
- Padding: this is similar to the Padding of Menu Bar.
- Margin: this is similar to the Margin of Menu Bar.
- Box Shadow: this is similar to the Box Shadow of Menu Bar.
This section contains the options for styling your top menu items when on hover state.
You’ll see the options for Top Menu Hover like on this picture:
- Hover Text Color: choose the color that your text will change to when item on hover state.
- Hover Text Shadow: choose the text shadow that your text will change to when item on hover state. You’ll see that these options are similar to which of Top Menu.
- Hover Background: choose the background color that your menu item will change to when on hover state. These options are similar to which of Top Menu.
- Hover Border Color: choose the color of the border that will be changed to when the menu item on hover state. Here we only allow you to change the Border Color, not the style and the width because changing border too much should create glitch for your menu.
This section contains the options for styling the Sub Menu box and the Sub Menu items of your menu.
- Sub Menu Box Border: these options are similar to those of Menu Bar. But please note that here’s for styling the box of your sub menu.
- Sub Menu Item Border: these options also are similar to those of Menu Bar, but please remember that here’s for styling of one item on Sub Menu.
- Font: these options are similar to those of Top Menu.
- Text shadow: these options are similar to those of Top Menu.
- Sub Menu Box Shadow: these options are similar to those of Top Menu.
- Sub Menu Box Background: these options are similar to those of Top Menu.
- Sub Menu Item Padding: these options are similar to the Padding of Menu Bar but here you have control over all 4 sides of the Menu Item: Top, Right, Bottom and Left. Also don’t forget that you are styling for one item of the Sub Menu.
- Sub Menu Box Padding: This is similar to the Sub Menu Item Padding, except that this is for styling of the Sub Menu Box.
This section contains the options for styling the Sub Menu items when on Hover state. You will see that all the options here are similar to that of Top Menu Hover.
Custom Style
This option allows you to add custom CSS style to the menu. If you want to change the general style of NOO Menu, please look at our Basic Structure & Class to know how to add correct custom css. Also you can add style for the extra class you added to each Sub Menu, Column and Menu Item.