Skip to content

Menu – change style (size, color)

[:en]Building the CSS:

  1. Go to Appearance → Customize  → Custom CSS
  2. Add/check classes for the needed style ex:  →    " .size-22{font-size:    22px !important;} " - for font 22px
  3. Take the needed class and use it on menu CSS . ex: size-22 (without the "." in front of class)

 

  1. Go to Appearance → Menus
  2. Click on Screen Options in the top-right
  3. Check CSS Classes under “Show advanced menu properties”. This will allow you to expand each menu item and add a custom class name that can be used to write Custom CSS for applying unique styles to each menu link.menu-classes
  4. You may now expand the menu items and add a unique CSS class for use in building your Custom CSS. In the below example, the unique class for the Design link is simply design-link . It is important not to use generic terms for your class names, ie do not use “home” “blog” etc as these are reserved classes for the page itself. To make your class unique, you can just add -link  on the end.
  5. Click Save Menu when finished.

 

[:no]Building the CSS:

  1. Go to Appearance → Customize  → Custom CSS
  2. Add/check classes for the needed style ex:  →    " .size-22{font-size:    22px !important;} " - for font 22px
  3. Take the needed class and use it on menu CSS . ex: size-22 (without the "." in front of class)
  1. Go to Appearance → Menus
  2. Click on Screen Options in the top-right
  3. Check CSS Classes under “Show advanced menu properties”. This will allow you to expand each menu item and add a custom class name that can be used to write Custom CSS for applying unique styles to each menu link.menu-classes
  4. You may now expand the menu items and add a unique CSS class for use in building your Custom CSS. In the below example, the unique class for the Design link is simply design-link . It is important not to use generic terms for your class names, ie do not use “home” “blog” etc as these are reserved classes for the page itself. To make your class unique, you can just add -link  on the end.
  5. Click Save Menu when finished.

[:]