Styling Sub-Menu Items With Responsive Menu Plugin

Styling sub-menu items are very easy with the options available in the responsive menu pro plugin.

Styling

Font: Sets the font for the sub-menu items. The specified font must be installed in your WordPress theme or a browser inbuilt one. Font Size: Sets the font size of the sub-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. Item Line Height: Sets the line-height of each sub-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 sub-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.

Item Borders

Width: Specifies the border width of each sub-menu item. Colour: Sets the border colour for each of the sub-menu items. Uses hex color codes or rgba() color values. Hover Color: Sets the border colour for each sub-menu item when the mouse rolls over it. Current Item Colour: Sets a border colour for the active sub-menu item. Current Item Hover Colour: Sets the border colour for the active submenu item when the mouse rolls over it.

Item Text

Colour: Sets the text colour of the submenu items. Uses hex color codes or rgba() color values. Hover Color: Sets the text colour for each submenu item when the mouse rolls over it. Current Item Colour: Sets a text colour for the active submenu item. Current Item Hover Colour: Sets the text colour for the active submenu item when the mouse rolls over it.

Item Background

Colour: Sets the background colour of the submenu items. Uses hex color codes or rgba() color values. Hover Color: Sets the background colour for each submenu item when the mouse rolls over it. Current Item Colour: Sets a background colour for the active submenu item. Current Item Hover Colour: Sets the background colour for the active submenu item when the mouse rolls over it.

Trigger Icon

Position: With the ‘Position’ field you can set at which side of the menu, a sub-menu trigger will appear. The dropdown option helps you to select the position very easily.

Trigger Sizing

Height: Sets height of the submenu trigger in pixels(px), emphasize(em), root em(rem), viewport width(VW), viewport height(VH). Width: Sets width of the submenu 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.

Padding

Side: The dropdown defines the side (either left or right) of the menu at which you want the padding should be on. Top Level: Sets the padding of the parent menu items from the side you specified above. Child Level 1: Sets the padding of the 1st level submenu items from the side you specified above. Child Level 2: Sets the padding of the 2nd level submenu items from the specified side. Child Level 3: Sets the padding of the 3rd level submenu items from the specified side. Child Level 4: Sets the padding of the 4th level submenu items from the specified side. Child Level 5: Sets the padding of the 5th level submenu items from the specified side.

Animations

Use Accordion: Enabling this option, will show all those menu items that have submenus in an accordion style. If you open any one these accordion then the other one will close automatically. By default, the option is set as disabled. Auto Expand All Sub Menus: Enabling this option, will auto expand all the menu items every time the page loads. By default, the option is set as disabled. Auto Expand Current Page Sub Menus: Enabling this option, will auto expand child submenus of the current parent every time the page loads. By default, the option is set as disabled. Expand Sub Menus on Parent Item Click: Enabling this option, will expand all the child submenus whenever a user clicks on the parent menu item. By default, the option is set as disabled.

Slide Effect

Enabled: The slide effect changes the way that sub-menus open and close. Instead of the standard drop-down animation, the slide effect will make them slide over the top of each other. Back Text: Back Text allows you to go back to the previous level when using the slide effect. You can specify the text in the input field you want to use as the back text.