Forums

Change one link in nav bar to another colour

Permalink
Hello!

First time posting so not sure if this is in the right section!

I am trying to change a single link in the nav bar to a different colour.

It is a website for a charity, and the nav bar text is currently purple, however I have a DONATE NOW button which i would like in red. How do I target just this link in the navbar to be a different colour?

The code i currently have for the whole nav bar is:
.knibbsmenu.knibbs-lg a, .knibbsmenu.knibbs-lg li ul li>.nav-dropdown {
display: block;
padding: 10px 18px;
color: @lg-nav-color;
text-transform: uppercase;
font-family: @font-family-serif;
}

If you need more code let me know, i am quite new to this so please bare with me ;-)

Thanks!
Laura
 
hutman replied on at Permalink Reply
hutman
There are a few steps to doing this, but this is the "best" way to do it.

Add a new Page Attribute with the handle "nav_item_class"
Add a value to your Donate Now page for that attribute, something like like "donate-button"
Find the autonav custom template for your navigation (assuming you use one) and uncomment these lines:
if (!empty($ni->attrClass)) {
    //class that can be set by end-user via the 'nav_item_class' custom page attribute
    $classes[] = $ni->attrClass;
}

Then update your CSS to target that class and change the color.
rge replied on at Permalink Reply
If you are not familiar with PHP than you can solve this with css. Keep in mind that this code wil not work when the path of the page is changed. So it is not a best practice.
.knibbsmenu.knibbs-lg a[href$="/donate"] {
    color: red;
}


href$= should contain the last part of the path.