• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2665

Original Genesis Tutorials & 5000+ Guaranteed Code

Snippets

  • Support
  • Newsletter
  • Videos
  • Log in

Premium Member? - Request custom code

Using Custom CSS Classes To Style Menu Items

You can style each menu item using the item i.d which you’ll find in the source code or by using CSS classes.

Screen Options

Go to Appearance > Menus > Screen Options

Under the Show Advanced Menu Properties, check the CSS Classes.

WP Menu Properties

Menu Item CSS Classes

Open each menu item and add a unique name for that menu items class.

Menu item css class

Styling Menu Item Classes

You can then use your unique custom class for each menu item for styling.

Here’s what it will look like in the source code:

class="orange-contact menu-item menu-item-type-post_type menu-item-object-page menu-item-37268

Add CSS

Changes the color of text for the menu item to red.

.orange-contact { color: #80000;}

Changes the background color of the menu item to yellow.

.orange-contact { background-color: yellow;}

Changes the color of the menu items text to red only when hovered over.

.orange-contact a:hover {
background-color:red;
}

Changes the text color to orange and the background color of the menu item to black when hovered.

.orange-contact a:hover {
color:orange;
background-color:black;
}

CSS Basics

CSS Selectors + Declarations

Class & I.D Selectors

You can also style nav menu items using the unique i.d for each menu item.

CSS class selectors always start with”.” dot and i.d selectors always start with “#”.

Sample code for using menu item i.d.

Example: #menu-item-1 { color: red; }

Sample code of using custom css classes.

Example: .menu-class-name { color: red; }

Reader Interactions

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

PHP Code

template_include

get_body_class

if else

array

class_exists

foreach

sprintf

add_action

printf

variable

Advertise · WPEngine · Genesis · Log in

  • How Premium Membership Works
  • Sign Up
  • Support
  • Subscription Details/Invoice
  • Tagged Tutorials
  • Access-Download Problems