CSS How to change colour of active navigation page menu

Question

I m trying to change the colour of the active or current page navigation link which is selected by the user on my website  What am I doing wrong  Thanks   So far the CSS looks like this   div menuBar      font-family  BirchStd     font-size  40px     line-height  40px     font-weight  bold     text-align  center     letter-spacing  -0 1em     div menuBar li list-style none  display  inline   div menuBar li a active color  FF0000   div menuBar ul margin 0     And my HTML calls a page template for the navigation menu using the include PHP function    lt div class  menuBar  gt     lt ul gt     lt li gt  lt a href  index php  gt HOME lt  a gt  lt  li gt     lt li gt  lt a href  two php  gt PORTFOLIO lt  a gt  lt  li gt     lt li gt  lt a href  three php  gt ABOUT lt  a gt  lt  li gt     lt li gt  lt a href  four php  gt CONTACT lt  a gt  lt  li gt     lt li gt  lt a href  five php  gt SHOP lt  a gt  lt  li gt    lt  ul gt

User · Accepted Answer

I think you are getting confused about what the a:active CSS selector does. This will only change the colour of your link when you click it (and only for the duration of the click i.e. how long your mouse button stays down). What you need to do is introduce a new class e.g. .selected into your CSS and when you select a link, update the selected menu item with new class e.g.

<div class="menuBar">
    <ul>
        <li class="selected"><a href="index.php">HOME</a></li>
        <li><a href="two.php">PORTFOLIO</a></li>
        ....
    </ul>
</div>

// specific CSS for your menu
div.menuBar li.selected a { color: #FF0000; } 
// more general CSS
li.selected a { color: #FF0000; }

You will need to update your template page to take in a selectedPage parameter.

User · Answer

The CSS  active state means the active state of the clicked link - the moment when you clicked on it  but not released the mouse button yet  for example  It doesn t know which page you re on and can t apply any styles to the menu items   To fix your problem you have to create a class and add it manually to the current page s menu   a active   color   f00     lt ul gt       lt li gt  lt a href  index php  class  active  gt HOME lt  a gt  lt  li gt       lt li gt  lt a href  two php  gt PORTFOLIO lt  a gt  lt  li gt       lt li gt  lt a href  three php  gt ABOUT lt  a gt  lt  li gt       lt li gt  lt a href  four php  gt CONTACT lt  a gt  lt  li gt       lt li gt  lt a href  five php  gt SHOP lt  a gt  lt  li gt   lt  ul gt

User · Answer

Add ID current for active current page    lt div class  menuBar  gt     lt ul gt     lt li id  current  gt  lt a href  index php  gt HOME lt  a gt  lt  li gt     lt li gt  lt a href  two php  gt PORTFOLIO lt  a gt  lt  li gt     lt li gt  lt a href  three php  gt ABOUT lt  a gt  lt  li gt     lt li gt  lt a href  four php  gt CONTACT lt  a gt  lt  li gt     lt li gt  lt a href  five php  gt SHOP lt  a gt  lt  li gt    lt  ul gt    current a   color   ff0000

[css] CSS: How to change colour of active navigation page menu

Examples related to css

Examples related to navigation