Home/ Questions/Q 3455200
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-18T09:35:07+00:00

I have an HTML menu in a partial and I want to make the

  • 0

I have an HTML menu in a partial and I want to make the menu items dynamic (changing colors) depending on which page we are at. How can I do that?

Thanks

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    A common trick that is used to alter the appearance of menus to reflect the current page is to put a CSS selector or class that reflects the page name in the body tag.

    Once you’ve done that, you can create different styles for each variation of page name that you want.

    For example:

    <!-- @page_name is 'home' in this example -->
<body class="<%= @page_name %>">

  <!-- Lots of html here -->

  <div class="nav_links">
    <ul id="nav">
      <li class="home"><a href="/"><span>Home</span></a></li>
      <li class="about_us"><a href="/about"><span>About us</span></a></li>
      <li class="store"><a href="/store"><span>Shop</span></a></li>
    </ul>
  </div>

    Then the CSS can be anything you like, but something like:

    body.home div.nav_links ul li.home { /* blah blah */ }
body.about_us div.nav_links ul li.about_us { /* blah blah */ }

    This method ensures good separation of concerns: the visual styles (changing of your colors) stay in your stylesheets, and out of your code.

    • 0