Navigation Menu Hover Colour And Font Colour

[MollieBobbins]

Been at this for over an hour and still cant get it too change, if i use inspector on google chrome i can change the font colour but not the navigation hover colour, however in the .less files i cant seem to get this to work, please help because this for a business website and i want to get everything right on it before changing the domain over to weebly.

This is the CSS i am looking at 

#navigation {
padding-bottom: 40px;
width: 960px;
margin: auto;
text-align: center;
text-transform: uppercase;
overflow: hidden;
font-family: 'Raleway', sans-serif;
font-size: 13px;
}
#navigation a{
display:inline-block;
padding:10px 14px;
}

#navigation ul:before,
#navigation ul:after {
background-color: #ec7956;
content: "";
display: inline-block;
height: 1px;
bottom: .1em;
position: relative;
vertical-align: middle;
width: 50%;
}

body.full-width-off #navigation ul:before,
body.full-width-off #navigation ul:after {
display: none;
}

#navigation ul:before {
right: 29px;
margin-left: -50%;
}

#navigation ul:after {
left: 29px;
margin-right: -50%;
}

#navigation li {
display: inline-block;
}

#navigation li:hover,
#navigation li#active {
background-color: @navBackgroundHover;
color: @navHover;
}

#navigation a {
color: inherit;
}

.wsite-menu{
list-style-type:none;
margin-left:25px;
}

#wsite-menus .wsite-menu li a {
background-color: @navBackgroundHover;
border: none;
color: @navHover;
}

#wsite-menus .wsite-menu li a:hover {
background-color: @subnavBackgroundHover;
color: teal;
}

.wsite-menu-arrow {
font-size: 0;
margin-left: 10px;
}

.wsite-menu-arrow:before {
display: inline-block;
content: '\203A';
vertical-align: bottom;
font-size: 20px;

[Queso]

Hey there! Just to be sure everyone is on the same page, can you go over the specific color alterations you'd like to see?

[MollieBobbins]

I want to change the font colour in the navigation menu, I also want to change the hover colour, so when I put my mouse over a navigation link on the menu, a square light grey box shows up,I want to change this box to another colour as well as possibly change to different colours for different menu options,if it help I can post screen shots in the morning

[MJCS]

Hi @MollieBobbins,

Are you able to provide your web site address? It's easier to help that way.

Thank you, Mark

[MollieBobbins]

Hi

This is the site address

http://molliebobbins.weebly.com/

I am trying to get as much done as i can before transferring the domain over

[MJCS]

Hi @MollieBobbins,

I've got your individual menu items to be different colours:

Drop this CSS at the end of your main CSS file:

li#active a {
    background: #f6f6f6 !important;
    color: coral !important;
}
#pg360199396916322670 { /*entrance*/
    color: blue !important;
}
#pg708113044337784445 { /*home*/
    color: red !important;
}
#pg932504617318792230 { /*shop*/
    color: green !important;
}
#pg783536887777639527 { /*about*/
    color: pink !important;
}
#pg578086755529608994 { /*updates*/
    color: orange !important;
}
#pg367509705682534309 { /*contact*/
    color: purple !important;
}

I'm working on the hover...

Let me know how you go with the above. It seems to work on desktop and mobile with no problems at my end.

Regards,

Mark

[MollieBobbins]

Thats brilliant, now will the values work if i change them to hex colour values

[MJCS]

Yes, @MollieBobbins. I just chose random colours that went along the idea of your design theme, not exact though! 

Glad it worked! Still going on the hover - it should be easy but...

[MollieBobbins]

So just as a test i changed on the of the colours, the one that is attached to entrance, change it to #7878b3,

No dice, no change in colour still showing as red

[MollieBobbins]

wait ignore that, it has changed

[MJCS]

And here's the hover change, @MollieBobbins:

#navigation a:hover {
   background: #cedced !important;
}

Once again - just a random colour but you can change it to whatever you want.

Cheers,

Mark

[MollieBobbins]

brilliant ill stick that at the end of the css again,

Now this question will be the last,

What if i wanted every active tab and active hover colour to be different, is this possible within the realms of css

[MollieBobbins]

Also 

I have put this at the end of the css and its not working, im getting good with this but i must be missing something 

#navigation a:hover {
background: #ffe351 !important;
}

[MJCS]

Yes certainly - those big long numbers that I gave you are particular to each menu item on your website.

If you add the a:hover code to another copy of them you can set a different set of hover combinations.e.g.:

#pg367509705682534309 a:hover { /*contact*/
    color: white !important;
    background: coral !important;
}

That will make the contact item white text and coral background only on hover. 

You seem to have a pretty good grasp of colours that you want so I won't list them all but that's the solution.

[MollieBobbins]

}
li#active a {
    background: #f6f6f6 !important;
    color: #000000 !important;
}
#pg360199396916322670 { /*entrance*/
    color: #7878b3 !important;
}
#pg708113044337784445 { /*home*/
    color: red !important;
}
#pg932504617318792230 { /*shop*/
    color: green !important;
}
#pg783536887777639527 { /*about*/
    color: pink !important;
}
#pg578086755529608994 { /*updates*/
    color: orange !important;
}
#pg367509705682534309 { /*contact*/
    color: purple !important;

#pg367509705682534309 a:hover { /*contact*/
    color: #e85d89 !important;
    background: coral !important;
}

Right ok, so i have tried as suggested, now above is what my code looks like at the moment, i have a feeling i am doing something wrong

[MJCS]

I can't see the last line in your CSS - did you save/publish?

It works when I add it to my Chrome Inspect

[MollieBobbins]

that ios the last line of my css, the bracket is the last line on there 

[MJCS]

Oops - you've got the code in the last line doubled

[MollieBobbins]

ok so how do i fix it, sorry im not seeing it at the moment

[MJCS]

You've pasted inside a }

[MJCS]

you need a } between the last two lines of command and remove the extra one