CODEWITHSUNDEEP
htmlcss
bbruman
bbruman

Reputation: 677

CSS Hover Customize One Menu Item

HTML:

    <div class="container-fluid nav-con">
      <div class="navbar-header">

        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" 
data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">
Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> 
<span class="icon-bar"></span> </button>

        <a class="navbar-brand" href="#">Navigation</a> </div>
      <div id="navbar" class="navbar-collapse collapse">
<ul id="menu-header" class="nav navbar-nav">
  <li id="menu-item-1368" class="menu-item menu-item-type-post_type 
menu-item-object-page menu-item-1368">
<a href="http://localhost/www/">Home</a></li>

<li id="menu-item-1632" class="menu-item menu-item-type-post_type menu-item-object-page 
menu-item-1632">
<a href="http://localhost/www/artists/">Artists</a></li>

<li id="menu-item-1369" class="menu-item menu-item-type-post_type menu-item-object-page 
menu-item-1369">
<a href="http://localhost/www/store/">Store</a></li>

<li id="menu-item-3569" class="bp-menu bp-profile-nav menu-item menu-item-type-custom 
menu-item-object-custom menu-item-3569">
<a href="http://localhost/www/members/">Members Area</a></li>

</ul></div></div>
</nav>

CSS:

.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover {
        border: 0;
        color: #000 !important;
        background: #ddd;
        text-shadow: 0 -1px 1px #fff;
}

Above CSS applies to all menu items, upon hover makes background #ddd of menu item and a text color of black.

Now I am trying to change the CSS on one particular Menu item - "Members Area"

I have tried this with 'menu-item-3569' but it is not working

.navbar-default .menu-item-3569 .navbar-nav>li>a:focus, .navbar-default .menu-item-3569 
.navbar-nav>li>a:hover {
        color: #EC442F !important;
}

I think because this is multi-layered it is confusing me with proper syntax. Any help?

Upvotes: 1

Views: 750

Answers (1)

Rounin
Rounin

Reputation: 29453

In CSS, the . is used to indicate a class.

menu-item-3569 is an id - it is indicated with a #.

Consequently, instead of:

.navbar-default .menu-item-3569 .navbar-nav>li>a:focus,
.navbar-default .menu-item-3569 .navbar-nav>li>a:hover

Try:

.navbar-nav li#menu-item-3569 a:focus,
.navbar-nav li#menu-item-3569 a:hover {
        color: #EC442F;
}

Upvotes: 2

Related Questions