Styling responsive menu items are very easy with the options available in the responsive menu pro plugin.
Font Icons
With ‘Font Icons’ setting you can use a dedicated icon for each menu /sub-menu item to make it look more attractive and appealing. In this section, you are provided with 3 fields in every row. Each row is specifically dedicated to each menu item and you can add as many rows as you want with ‘Add Font Icon’ button. Every row contains 3 fields; 1st field is for selecting a menu item from the dropdown, 2nd field is for determining the icon symbol and 3rd field is for what type of font icon you want to use. Currently, we support Font Awesome, Glyphicon and custom icons. For a guide on implementing icons in your menu and for more info please visit our dedicated doc page here.
Depth
Depth determines how many levels of hierarchy your menu can have.
Styling
Font: Sets the font for the menu items. The specified font must be installed in your WordPress theme.
Font Size: Sets the font size of the menu items in the pixels(px), emphasize(em), root em(rem), viewport width(VW), viewport height(VH) units.
Item Height: Sets the height of each menu item.
Line Height: Sets the line-height of each menu item. Line height is different from the item height as line-height defines the height of each line and the item height specifies the height of each menu item excluding line-height.
Text Alignment: Aligns the text according to your specific requirements. You just need to select a value from the dropdown field.
Word Wrap: If you have long menu-items then enabling this option allows the menu items to wrap around to the next line.
Item Border
Width: Specifies the border width of each menu item.
Colour: Sets the border colour for each of the menu items. Uses hex color codes or rgba() color values.
Hover Color: Sets the border colour for each menu item when the mouse is rolled over it.
Current Item Colour: Sets a border colour for the active menu item.
Current Item Hover Colour: Sets the border colour for the active menu item when the mouse is rolled over it.
Item Text
Colour: Sets the text colour of the menu items. Uses hex color codes or rgba() color values.
Hover Color: Sets the text colour for each menu item when the mouse is rolled over it.
Current Item Colour: Sets a text colour for the active menu item.
Current Item Hover Colour: Sets the text colour for the active menu item when the mouse is rolled over it.
Item Background
Colour: Sets the background colour of the menu items. Uses hex color codes or rgba() color values.
Hover Color: Sets the background colour for each menu item when the mouse is rolled over it.
Current Item Colour: Sets a background colour for the active menu item.
Current Item Hover Colour: Sets the background colour for the active menu item when the mouse is rolled over it.
Trigger Icon
Position: Trigger icons are used to expand the sub-menus of a particular menu item. With the ‘Position’ field you can set at which side of the menu, sub-menu trigger will appear. The dropdown option helps you to select the position very easily.
Active Shape: It helps you to define the shape of the trigger when the menu item is in expanded/active state and you can clearly see all the sub-menus of this particular menu-item. You will have to click on the trigger icon to expand the sub-menu items. You can also change the shape of the trigger icon by just copying and pasting the desired shape from this page. Do not copy the shape code otherwise, it will show the code instead of shape icon.
Inactive Shape: It helps you to define the shape of the trigger when the menu item is not in expanded/active state and you can not clearly see all the sub-menus of this particular menu-item. The shapes of trigger icon can also be changed using this page.
Active Image: It lets you set an image as the active sub-menu trigger. If you use both an image and a shape as the active sub-menu trigger, the image will take precedence over shape.
Alt Text: This field lets you define the alt text for the image as an active sub-menu trigger.
Inactive Image: It lets you set an image as the inactive sub-menu trigger. If you use both an image and a shape as the inactive sub-menu trigger, the image will take precedence over shape.
Alt Text: This field lets you define the alt text for the image as an inactive sub-menu trigger.
Active Font Icon: If you like you can also set an icon as the active sub-menu trigger. The font icon will have the highest precedence over image and shape.
Inactive Font Icon: If you like you can also set an icon as the inactive sub-menu trigger. The font icon will have the highest precedence over image and shape.
Trigger Sizing
Height: Sets height of the menu trigger in pixels(px), emphasize(em), root em(rem), viewport width(VW), viewport height(VH).
Width: Sets width of the menu trigger in pixels(px), emphasize(em), root em(rem), viewport width(VW), viewport height(VH).
Trigger Colours
Colour: ‘Colour’ field sets the colour of the sub-menu trigger. This field takes a hex code or rgba() value to specify the colour.
Hover: ‘Hover’ field sets the colour of the sub-menu trigger when the mouse hovers over it. This field also takes a hex code or rgba() value to specify the colour.
Active Colour: Sets the colour of the sub-menu trigger when the menu item is in an active state.
Active Hover Colour: Sets the hover colour of the sub-menu trigger when the menu item is in an active state.
Trigger Background
Colour: Sets the background colour of the sub-menu trigger. Takes a hex code or rgba() value to specify the colour.
Hover Colour: Sets the background colour of the sub-menu trigger when the mouse hovers over it.
Active Colour: Sets the background colour of the sub-menu trigger when the menu item is in an active state.
Active Hover Colour: Sets the background hover colour of the sub-menu trigger when the menu item is in an active state.
Trigger Border
Colour: Sets the border colour of the sub-menu trigger. Takes a hex code or rgba() value to specify the colour.
Hover Colour: Sets the border colour of the sub-menu trigger when the mouse hovers over it.
Active Colour: Sets the border colour of the sub-menu trigger when the menu item is in an active state.
Active Hover Colour: Sets the border hover colour of the sub-menu trigger when the menu item is in an active state.
Descriptions
Enabled: This field lets you enable the descriptions of the menu items if you have already set them. By default, the field is disabled. You can specify the descriptions of the menu items in the ‘Menu’ settings of the WordPress admin panel.
Animations
Smooth Scroll Enabled: Enabling this field allows the same page links to smooth scroll to their destinations. Same page links means when the hypenlink and its destination are on the same page. By default, the field is disabled.
Smooth Scroll Field: It sets the speed at which same page links will scroll smoothly. The speed is defined in microseconds(ms). For e.g. 500ms refers to a half-second and 1000ms refers to full 1 second.
Fade Items In
Enabled: Enabling this option makes the menu items appear with fade-in animation whenever the menu container opens rather than simply appearing all menu items at once. By default, the option is disabled.
Side: With this drop-down option, you can select from which side you want your menu items to fade in.
Delay: Sets the delay between each menu item fade finishing and the next one starting.
Speed: Sets the speed at which the menu items fade in.
Advanced
Theme Location Menu: This dropdown offers you to select a location menu specific to the applied theme. However, this option will overwrite the menu you have specified in the ‘menu to use’ field in the Initial Setup tab.
Custom Walker: Sets your own Walker class for customising the links HTML output.
