CSS: How to change colour of active navigation page menu

by

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="https://stackoverflow.com/questions/11382664/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.

More Related Contents:

  1. Separators for Navigation
  2. Why can’t an element with a z-index value cover its child?
  3. Maintaining the final state at end of a CSS3 animation
  4. What is the difference among col-lg-*, col-md-* and col-sm-* in Bootstrap?
  5. Add Bootstrap Glyphicon to Input Box
  6. How to set Bullet colors in UL/LI html lists via CSS without using any images or span tags [duplicate]
  7. What is the opposite of :hover (on mouse leave)?
  8. Inline SVG in CSS
  9. How to make a floated div 100% height of its parent?
  10. How do I uncollapse a margin? [duplicate]
  11. SVG animation is not working on IE11
  12. not:first-child selector
  13. Why is @font-face throwing a 404 error on woff files?
  14. SVG USE element and :hover style
  15. How to make fixed header table inside scrollable div?
  16. Dynamically change color to lighter or darker by percentage CSS
  17. Placing Unicode character in CSS content value [duplicate]
  18. top nav bar blocking top content of the page
  19. Is it valid to have paragraph elements inside of a heading tag in HTML5 (P inside H1)?
  20. background image, linear gradient jagged edged result needs to be smooth edged
  21. How to make this Header/Content/Footer layout using CSS?
  22. Sass @each with multiple variables
  23. CSS: Width and Max-Width
  24. Is the :before pseudo-element allowed on an input[type=checkbox]?
  25. Flip a 3D card with CSS
  26. How to create a radial menu in CSS?
  27. Overlay a background-image with an rgba background-color
  28. CSS select multiple descendants of another element
  29. Select all ‘tr’ except the first one
  30. How can I align 3 divs side by side?

Leave a Comment