Highlight the Navigation Menu for the Current Page

highlight the navigation menu for the current page

You can set the id of the body of the page to some value that represents the current page. Then for each element in the menu you set a class specific to that menu item. And within your CSS you can set up a rule that will highlight the menu item specifically...

That probably didn't make much sense, so here's an example:

<body id="index">
<div id="menu">
 <ul>
  <li class="index"     ><a href="index.html">Index page</a></li>
  <li class="page1"     ><a href="page1.html">Page 1</a></li>
 </ul>
</div> <!-- menu -->
</body>

In the page1.html, you would set the id of the body to: id="page1".

Finally in your CSS you have something like the following:

#index #menu .index, #page1 #menu .page1 {
  font-weight: bold;
}

You would need to alter the ID for each page, but the CSS remains the same, which is important as the CSS is often cached and can require a forced refresh to update.

It's not dynamic, but it's one method that's simple to do, and you can just include the menu html from a template file using PHP or similar.

HTML + CSS navigation bar highlighting current page

you have to use JavaScript or jQuery to do this

example

CSS

<style type="text/css">
ul.navigation
{
    background:#fff;
}
ul.navigation li a
{
    text-decoration:none;
}
ul.navigation li a.on
{
    background:yellow;
    padding:2px 6px;
}
</style>

<script type="text/javascript">
$(function(){
    var $page = jQuery.url.attr("file");
    $('ul.navigation li a').each(function(){
        var $href = $(this).attr('href');
        if ( ($href == $page) || ($href == '') ) {
            $(this).addClass('on');
        } else {
            $(this).removeClass('on');
        }
    });
});
</script>

HTML

<ul class="navigation">
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="solutions.html">Solutions</a></li>
    <li><a href="contact.html">Contact</a></li>

demo is here
http://www.kevinleary.net/wp-samples/jquery-current-navigation/solutions.html

for more information

http://www.kevinleary.net/highlighting-the-current-page-with-php-jquery/

i hope this will help

thanks

Active Navigation Menu Highlight for Current Page from a Single Header File

You can achieve this with pure JavaScript and HTML.

<a href="index.php" class="myLink" data-pathname="/index.php"><li>Home</li></a>
<a href="forum.php" class="myLink" data-pathname="/forum.php"><li>Forum</li></a>

If needed active class in <li> instead of anchor tag <a>

<a href="index.php"><li class="myLink" data-pathname="/index.php">Home</li></a>
<a href="forum.php"><li class="myLink" data-pathname="/forum.php">Forum</li></a>

var links = document.getElementsByClassName("myLink");
var URL = window.location.pathname;
URL = URL.substring(URL.lastIndexOf('/'));
for (var i = 0; i < links.length; i++) {
  if (links[i].dataset.pathname == URL) {
    links[i].classList.add("active");
  }
}

Highlight current page navigation link

I've editited Rami's answer to use the whole href.

//this makes the current link containing li of class "active"
$(document).ready(function ($) {
    var url = window.location.href;
    var activePage = url;
    $('.irp-menu-item a').each(function () {
        var linkPage = this.href;

        if (activePage == linkPage) {
            $(this).closest("li").addClass("active");
        }
    });
});

Navbar highlight for current page

If you have the same navigation bar in each HTML page of your website, then you can do like this:

For example in index.html add class='active-page' to the first menu item:

<div id="nav_bar">
    <ul>
        <li><a href="index.html" class='active-page'>Home</a></li>
        <li><a href="status.html">Status</a></li>
        <li><a href="info.html">Info</a></li>

Then in the status.html add class='active-page' again but for the second item:

<div id="nav_bar">
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="status.html" class='active-page'>Status</a></li>
        <li><a href="info.html">Info</a></li>

And do this for all of your pages.

Finally in your css write a class for active-page like this:

#nav_bar ul li a.active-page
{
  background-color:blue;
}

Highlight the current menu item?

The suggestion of wp_nav_menu is the correct way in WordPress, but if you're just looking for a quick solution and the menu won't change that often, you can get by with a check inside of each list item.

<ul class="navigation">
 <li><a href="<?php echo home_url() ?>" class="navItem <?php if( is_front_page() ): echo 'current'; endif; ?>">Home</a></li>
 <li><a href="<?php echo home_url(/archive) ?>" class="navItem <?php if( is_home() || is_archive() || is_single() ): echo 'current'; endif; ?>">Archive</a></li>
 <li><a href="<?php echo home_url(/about) ?>" class="navItem <?php if( is_page('About') ): echo 'current'; endif; ?>">About</a></li>
</ul>

This makes use of WordPress' "Conditional Tags" which effectively come back as "true" or "false" for a given page. Note that the second link checks multiple blog/post conditions (assuming that that is for the blog).

Highlight the Navigation Menu for the Current Page