How to change color of one menu item

  • I know this has been discussed multiple times. I tried multiple solutions and none works for me. Hope CSS experts can give me some advice

    I can change all of the menu items font color by adding the following code

    div #menu-primary .menu li a{
    color: #FF6600!important;
    font-size:15px;
    }

    I created a new class for the first item that i want to change as “create.nav”in widget/menu, then added the following code

    .create.nav {
    color: black!important;
    }

    This doesn’t work at all.

Viewing 2 replies - 1 through 2 (of 2 total)

  • You probably need to increase the specificity of your CSS selector, but without seeing your menu html it’s hard to say with confidence what that selector might be.

    Something along these lines perhaps (this is a guess from your css above):

    div #menu-primary .menu li.create.nav {
    color: black !important;
}
    Thread Starter waynecao

    (@waynecao)

    Hi Neil,

    This doesn’t work. The HTML code is as following

    <!– #menu-primary-title –>
    <div class=”menu”>
    <ul id=”menu-primary-items” class=”primary_menu clearfix”>
    <li class=”create-nav menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-413″>

    “Create Listing”
    <span class=”sub-indicator”>?</span>

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How to change color of one menu item’ is closed to new replies.