Return to previous page

Menu Link Colours and Active Links - by tomupton

This topic has 5 replies, 4 voices, and was last updated 10 years, 7 months ago ago by Eva Kemp

tomupton

Participant

May 22, 2014 at 01:30
Hey Guy’s,

I have created a custom css file for my theme, and set the background of the main navigation bar to BLUE.

The primary links which are being used across the site are blue too, so obviously the navigation menu links in the main header don’t appear. Ive added the following code but for some reason an “Active” link is still blank
```
.fixed-header .menu > li > a, .main-nav .menu > li > a {
    display: block;
    font-family: Georgia;
    font-size: 14px;
    font-weight: 400;
    padding: 13px 5px;
    position: relative;
    text-transform: uppercase;
	color: #FFF;
}

#main-nav > ul > li.current_page_item > a {
	color: #000000 !important;
}

#main-nav > ul > li > a:hover, #main-nav > ul > li > ul > li a:hover {
	color: #000000 !important;
}
```
What I want to do is be able to set a colour of a link when a visitor is on that page. i.e. usually on most websites when you are on the current page e.g. the homepage. The menu link is a different colour.

Any help would be fab!

Regards
Tom
#4541 Copied
4 Answers

DeathByDisco

Participant

May 22, 2014 at 05:43

Hi Tom,

try the following css snippet to change the color of the current (active) menu link:

.main-nav .menu > li.current-menu-item > a {
color:#000000!important;
}

If that doesn’t work can you may post a link to your site ? that way it would be much easier to troubleshoot your problem.

an this snipped can be used to change the color of the main nav links:

.main-nav .menu>li>a {
color:#000000!important;
}

and this is for the hover state:

.main-nav .menu > li > a:hover {
color:#000000!important;
}

hope that helps ….

#4542 Copied

Jack Richardson

Support staff

May 22, 2014 at 09:09

Hello,

Please provide us with link to your site.

Regards,
Jack Richardson

#4556 Copied

tomupton

Participant

May 22, 2014 at 11:03

Amazing, thanks guys! That worked perfectly 🙂

#4562 Copied

Eva Kemp

Support staff

May 22, 2014 at 11:06

Hello,

You’re welcome.

Regards,
Eva Kemp.

#4564 Copied
Tagged: active, best selling, colours, link, links, menu, themes, woocommerce
Viewing 5 results - 1 through 5 (of 5 total)