Highlight current link on navigation bar

Question

Need help to highlight current category on navigation bar. How can I achieve this? I would really appreciate some help. Thanks.

Answer 1

your 0 level menu CSS is confliction with the 1 level menu CSS try to change in the #nav ul li a:active{}

Answer 2

a:hover{background-color: yellow}

This CSS will do it for ya.

Answer 3

@MichaelEugeneYuen

This is my top.phtml file, I added

<li <?php if (Mage::helper('core/url')->getCurrentUrl() === $this->getUrl('Offers')):?>class="active"<?php endif;?>><a href="<?php echo $this->getUrl('contacts')?>">Offers</a></li>

but I don't know if it is correctly placed

<?php

/**

 * Top menu for store

 *

 * @see Mage_Catalog_Block_Navigation

 */

?>

<?php

/**

 * $this->renderCategoriesMenuHtml() supports optional arguments:

 * int Level number for list item class to start from

 * string Extra class of outermost list items

 * string If specified wraps children list in div with this class

 */

?>

<?php $_menu = $this->renderCategoriesMenuHtml(0,'level-top') ?>

<?php if($_menu): ?>

<script>

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

                $j('#nav').mobileMenu();

        });

    </script>

<div class="nav-container">

    <ul id="nav">

    <li <?php if (Mage::helper('core/url')->getCurrentUrl() === $this->getUrl('Offers')):?>class="active"<?php endif;?>><a href="<?php echo $this->getUrl('contacts')?>">Offers</a></li>

        <?php echo $_menu ?>

    </ul>

</div>

<?php endif ?>

Also, i have added the CSS code you gave me to the Style.css in the 0 level

/* 0 Level */
    #nav li { 
        float: left;
        padding: 5px 17px 10px 0;
    }
    ul#nav{padding-left:0px }
    #nav a { font-size:18px!important;
    color: #666666 !important;
    float: left;
    padding-left: 5px;
    font-family: 'futura_lt_btlight'; !important;
    font-weight:normal !important;
    li:active a { font-color: red; }
     }
     .subcategories {
      padding-left: 0px !important;
      margin-right: 0px !important;
    }
    #mc-embedded-subscribe {
      float: left;
      width: 11px;
      background: url(https://www.blubond.com/wp-content/uploads/2015/01/cross.png) no-repeat !important;
      height: 11px;
      color: rgba(0, 0, 0, 0);
      text-indent: 9999px;
      border: 0px !important;
      margin-top: 7px;
      margin-left: 5px;
      box-shadow: none;
    }
    #nav > li:nth-child(3) {
    background: url("../images/main_menu_dd_arw.png") no-repeat 100% 15px;  
    margin-right: 16px;
    }
    .post-entry center {
      font-family: 'futura_lt_btlight';
      font-size: 18px;
      line-height: 24px;
    }
    .page-template-blog-excerpt-php .post {
      margin-bottom: 60px;
    }
    .page-template-blog-excerpt-php .post-entry {
      font-family: 'futura_lt_btlight';
      font-size: 18px;
      line-height: 24px !important;
    }
    .page-template-blog-excerpt-php .post-entry p {
      margin-bottom: 0px;   
    }
    .page-template-blog-excerpt-php .post-data {
      margin-top: 0px;
    }
     .nav-collapse a {
    text-align: left;
    }
    .rdiregdrop
    {
        background: url("../images/top_dd_arw-3.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
        display: block;
        float:right;
        height: 5px;
        margin-left: 0;
        margin-right: 6px;
        margin-top: 11px;
        width:9px;
    }
    #nav li.over a,
    #nav a:hover { color:#9f9f9f;}
    .rdishopdd{display: block;float:right;height:5px;width:9px;display:none; margin-left: 5px;
        margin-top: 10px;}
    .rdishopdd:hover{background: url("../images/main_menu_dd_arw.png") repeat scroll 0 0 rgba(0, 0, 0, 0); display: block;float:right;height:5px;width:9px;display:block;margin-left: 5px;
        margin-top: 10px;} 

Answer 4

You need to find the page id of the link: Example:

<a href="link_to_id"<?php if ($page_id == $link_to_id) { echo ' class="active"'; } ?>>Link</a>

css:

a.active {
font-color: red;
}