How do you give current page of website an other color in menubar?

Question

I have a question concerning a menubar in html. I try to give the current page you're in an other color than the normal color in the menubar, but the code that I have written does not work.

   #menubar,
    #menubar ul{
list-style: none;
margin-bottom: 5%;
}

#menubar>li{
float: left;
}

#menubar li a{
display: block;
height: 125%;
width: 100%;
padding: 10px;
text-decoration: none;
}

#menubar>li>a{
background-color: orangered;
color: #fff;
}
/*submenu*/
#Bloglijst{
position: absolute;
background-color: #efefef;
z-index: 9999;
display: none;
}

#Bloglijst>li>a{
color: #121;
width: auto;
}
#menubar li a:hover{
 background-color: #ffffff;
 color: chocolate;
 }
#menubar li:hover #Bloglijst{
display: block;
}


#ProjectLijst{
position: absolute;
background-color: #efefef;
z-index: 9999;
display: none;
}

#ProjectLijst>li>a{
color: #121;
width: auto;
}
#menubar li:hover #ProjectLijst{
display: block;
}
#welkomstekst{
margin-top: 10%;
}
#menubar{
width: 75%;
padding: 0;
}
.active{
background-color: yellow;
}

<li class="active"><a href="index.html"> Home </a> </li>
<li class="active" ><a href="HTML5/Blog.html"> Blog </a>
    <ul id= "Bloglijst">
        <li><a href="HTML5/Daily-Blog.html">Daily-Blog</a> </li>
    </ul>
</li>
<li class="active"><a href="HTML5/Contact.html"> Contact </a>
<li class="active"><a href="HTML5/Projects.html"> Projects </a>
    <ul id= "ProjectLijst">
        <li><a href="HTML5/Sport.html">Sport</a> </li>
        <li><a href="HTML5/School.html">School</a> </li>
        <li><a href="HTML5/Hobby.html">Hobby</a> </li>
    </ul>
</li>
<li class="active"><a href="HTML5/Interests.html"> Interests </a></li>
<li class="active"><a href="HTML5/Connections.html"> Connections </a></li>

you can apply an active tab http://stackoverflow.com/questions/17200041/bootstrap-nav-tabs-dropdown-menus-how-to-set-active-tab-based-on-uri — Pogrindis, Feb 27 '15 at 19:44
check out my answer here to this question http://stackoverflow.com/questions/26514344/how-to-highlight-currently-opened-page-link-in-css/26514790#26514790 — Sai, Feb 27 '15 at 19:45
Check this out: http://stackoverflow.com/questions/2397370/how-to-change-the-link-color-of-the-current-page-with-css That answered your question. — , Feb 27 '15 at 19:46

score 0 · Answer 1 · answered Feb 27 '15 at 20:11

You have plenty of comments that link to suggestions, but just in case, here's the most simple way to handle what you want:

You have the class .active on each menu item, what you want is to have .active only on the menu item that corresponds with the current page. For example:

<li class="active"><a href="index.html"> Home </a> </li>
<li><a href="HTML5/Blog.html"> Blog </a>
...

This would be the markup for just your index.html page. Your Blog.html page would look something like this:

<li><a href="index.html"> Home </a> </li>
<li class="active"><a href="HTML5/Blog.html"> Blog </a>
...

Repeat this for each page and you should be setup correctly.

Then, simply apply the color you want to the .active class and it will only show on the current page.

How do you give current page of website an other color in menubar?

1 Answers1