Highlighting the Menu Item for the Current Page

  • Resolved RadioXi

    (@radioxi)


    12 years, 5 months ago

    Hi,
    I am trying to implement a navigation-menu at the top of my WP-site, and I would like that the menu item for the current page to be highlighted.

    The nagigation-menu in the header.php, look like this:

    <nav class="primary">
		<ul id="topnav" class="sf-menu"><li><a href="https://localhost/wordpress/wordpress/?page_id=63">Home</a></li>
.
.
.
.

    The correspondig CSS, look like this:

    #topnav {
	margin:0;
	height:63px;
}

.sf-menu {
	padding:0px 0px 0px 0px;
	position:relative;
	background:none;
	text-align:left;
	display:block;
}
.sf-menu li {
	position:relative;
	list-style:none;
}

.sf-menu a:hover { background-color: #254a0a; !important }

.sf-menu li a {
	font-weight:normal;
	background:none;
	text-decoration:none;
	display:block;
}
.sf-menu li a selected {
    background-color: #254a0a;
}

    And this is the javascript, placed in the header:

    <script type="text/javascript">
$(document).ready(function(){
    $('.sf-menu a').each(function(index) {
        if(this.href.trim() == window.location)
            $(this).addClass("selected");
    });
});
</script>

    Can anyone see why this is not working?

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

  • hi RadioXi, i will have a look at this for you. However, in the meantime, have a look at this: https://snipplr.com/view/63803/simple-jquery-active-menu-highlighter/

    Thread Starter RadioXi

    (@radioxi)

    Thank you! I have been trying to figure it out by my self using the snipplr-link, with no success!

    hi RadioXi,

    okay, lets forget about the JS and the code used in the header and lets focus on the CSS method.

    For highlighting a particular menu item,you can try this in your css file::

    #nav li.current_page_item a{
color:#254a0a !important;
background-color:#254a0a;
text-decoration:none;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
padding:10px 10px;
}

    Where nav is the id of the <nav id=”id”> tag where menu is being located in

    header.php,like this::

    <nav id="nav">

  <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>

</nav>
    Thread Starter RadioXi

    (@radioxi)

    Hi,

    I acually got your first suggestion to function, with a little modification:

    <script type="text/javascript">

    jQuery(document).ready(function($){

        // Get current url
        // Select an a element that has the matching href and apply a class of 'active'. Also prepend a - to the content of the link

        var url = window.location;

        $('a[href="'+url+'"]').parent('.sf-menu li').addClass('highlight a'); 

    }); 

</script>

    The CSS is like this:

    .sf-menu a:hover { background-color: #254a0a; !important }

/* is active */
.sf-menu li.highlight a {
	background-color: #254a0a;
        color: #FFFFFF;

}

    Thank you very much ??

    Glad you got this sorted out RadioXi.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Highlighting the Menu Item for the Current Page’ is closed to new replies.