CODEWITHSUNDEEP
htmlcssnavigation
toolbox3
toolbox3

Reputation: 116

Current Menu Page Item Background Not Changing - CSS

I am trying to get a little graphic to designate which page the viewer is on with css, but it just won't highlight. Here is my code:

HTML:

 <ul class="side-nav">
 <a href="http://www.cieloazulsantafe.com/nav-test.html"><li><span>Home</span></li></a>
 <a href="http://www.cieloazulsantafe.com/sample-page.html"><li>
 <span>Sample Page</span></li></a>
 </ul>

CSS:

 ul.side-nav span{
  margin-left: 50px;    
  text-decoration: none;
  color: #fff;
  }
 ul.side-nav a li{
 background: url('http://cieloazulsantafe.com/wp-content/uploads/2014/03/nav-grad.png');
 list-style: none;
 height: 41px;
 width: 250px;
 line-height: 2.0;
 text-decoration: none;
 }
 ul.side-nav a li:hover{
 background: url('http://cieloazulsantafe.com/wp-content/uploads/2014/03/nav-grad1.png');   
 }
 ul.side-nav a li.current-menu-item{
 background: url('http://cieloazulsantafe.com/wp-content/uploads/2014/03/nav-grad1.png');
}
a{
text-decoration: none;  
}

Seems straightforward, but I just can't get the background to change. I know its because its the li element, but I guess the "current-menu-item" order is wrong.

Url : http://cieloazulsantafe.com/nav-test.html Thanks in advance.

Upvotes: 0

Views: 547

Answers (2)

benomatis
benomatis

Reputation: 5633

You will have to name the body (give it an id) and the li tags, and refer to them respectively in your css. This is the easiest, pure css way.

HTML

<body id="home-body"> // ... on your home page

...

<body id="about-body"> // ... on your about page

Your nav

<li id="home-menu">Home</li>
<li id="about-menu">About</li>

CSS

body#home-body li#home-menu, body#about-body li#about-menu { // style of the active menu item }

You might want to have a look at my answer I provided on the following question: How can I use one Nav Bar code on multiple pages, BUT have the current page highlighted?

EDIT: This is the "pure css" way; but depending on your needs, there might be other ways down this road.

Upvotes: 2

Mattos
Mattos

Reputation: 447

CHECK THIS FIDDLE http://jsfiddle.net/luckmattos/aN2ny/

Your HTML and CSS were broken:

HTML

<ul class="side-nav">
<li><a href="#">Home</a></li>
<li class="current-menu-item"><a href="#">Current</a></li>
</ul>

<a> has to be inside the <li>, put the text properties on the <a>. Most important you forgot to put the class current-menu-item on the current <li>.

CSS

ul.side-nav {
    margin-left: 50px;    
    text-decoration: none;
    padding:0px;
    list-style: none;
    width: 250px;
 }
 ul.side-nav li{
     padding:0px;
     margin:0px;
     display:block;
     background: url('http://cieloazulsantafe.com/wp-content/uploads/2014/03/nav-grad.png');
     height: 41px;
     cursor:pointer;  
 }
ul.side-nav li a {
    margin:0px;
    display:block;
    padding-left:50px;
    text-decoration:none;
    color: #fff;
    height:41px;
    line-height:41px;
}
ul.side-nav li a:hover, 
ul.side-nav li.current-menu-item {
     background: url('http://cieloazulsantafe.com/wp-content/uploads/2014/03/nav-grad1.png');   
 }

There are several minor changes, take a look at the code.

Upvotes: 0

Related Questions