active link to posts in pages Wordpress

Question

I have been reading around about how to make the navigation link stay active, when inside a post[ single page ]. I haven't found any solutions so i created a mix of jquery and php, But i don't think this is the right way dough it work.

So I was thinking of how to optimize the code much more. Any ides ?

<?php 
if (in_category('news')){ ?>
    <script>
     $(".menu-item-46 a").css("border-bottom","#000 5px solid");
     $(".menu-item-46 a").css("padding-bottom","11px");
    </script>
<?php }elseif (in_category('network')){ ?>
    <script>
     $(".menu-item-47 a").css("border-bottom","#000 5px solid");
     $(".menu-item-47 a").css("padding-bottom","11px");
    </script>
<?php } ?>

Answer 1

One way to tackle the problem is to take advantage of CSS.

Have a class called "active", and append this to the parent element holding the menu you wish to show.

Example:

<div class="active">
     <div class="menu-item-46"><a>My Nav</a></div>
</div>

Then in your css file:

.active .menu-item-46{
    border-bottom:#000 5px solid;
    padding-bottom:11px;
}

Another suggestion would be to give the menu items, a generic class, "menu-item", as well as an id "menu-item-##". So you css can simply be ".active .menu-item"