Search code examples
navigationbigcartel

Main Nav Colour in Luna Theme

This is my website - http://www.afternoons.com.au

I have been trying to change the main nav colour to an orange when it is rolled over and when a page is clicked on. I have figured out you have to change the 'text' colour in the backend customization BUT this also changes the text of the product descriptions.

Is there a way to override the CSS so that the product descriptions remain grey, while the main nav can rollover to orange and stay orange when clicked on?

Solution

  • You can change the hover color of the Luna theme's navigation bar links by adding the following CSS at the very bottom of Customize Design > Advanced > CSS:

    #main_nav li a:hover {
  color: #ff0000;
}

    Just replace the color with whatever you'd like and you're all set. Then to activate the "selected" class for every category page, you can do the following:

    Everywhere you have a link like this in the Layout code: 

    <li><a href="http://www.afternoons.com.au/category/vessels">Vessels</a></li>

    You need to replace it using the following format:

    <li {% if page.full_url contains '/category/vessels' %}class="selected"{% endif %}><a href="/category/vessels">Vessels</a></li>

    And finally, you'll need to use this CSS: 

    #main_nav li a:hover, #main_nav li.selected a { 
  color: #FF0000
}