Item Styling

Styling individual Menu Items

The ability to apply custom styling to individual menu items is one of the most powerful features of Max Mega Menu Pro.

With Custom Item Styling you can:

  • Set sub menu widths individually
  • Add background images to sub menus
  • Make standard menu items look like buttons (check out the ‘Buy now’ button in the menu above)
  • Apply custom hover colors to individual items
  • Change the size and color of icons
  • Set custom margin and padding values for individual items
  • Lot’s more!

If you wish to apply styling to an individual item (for example, to highlight an item in the menu), go to Appearance > Menus. Hover over the menu item you’d like to apply styling to and click the blue ‘Mega Menu’ button. Styling options can be found on the “Styling” tab.


Available Settings

  • Menu Item Background Color (+Hover)
  • Menu Item Font Color (+Hover)
  • Menu Item Border Color (+Hover)
  • Menu Item Icon Color (+Hover)
  • Menu Item Border Radius
  • Menu Item Border Width
  • Menu Item Font Size
  • Menu Item Padding
  • Menu Item Margin
  • Menu Item Icon Size
  • Sub Menu Width
  • Sub Menu Background Image

CSS Output

Using the Styling tab will ensure the correct CSS is automatically generated for the menu item – we don’t use shortcuts like !important or inline styles.

Like what you see? This functionality is available inĀ Max Mega Menu Pro

Related Articles