X-Cart forums

[Doherty]

Back again having fun playing with the CSS!

This is what i have so far;

.banner-carousel .carousel-indicators li {
  border-color: red;
}
.banner-carousel .carousel-indicators .active {
  background-color: red;
}
.navbar-inverse {
  background-color:red;
  border-color: red;
}

.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
  color: #ffffff;
  background-color: #760303;
}

.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
  color: #ffffff;
  background-color: #760303;
}

Problem with this is that the .navbar seems to have a property that keeps the a:hover grey and I can't seem to change it what so ever!

any thoughts?

[qualiteam]

Please read about the CSS specificity:
https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/

I believe you can solve this by adding an extra CSS class to the selectors.

[Doherty]

a:hover {
background-color: yellow;
}

When I add this code into the .navbar it makes the whole bar itself hover with yellow but the actual menu items remain grey when hovered...

I'm stumped!

[qualiteam]

No! I mean you should add an extra class to selectors like this:
".navbar-inverse .navbar-nav > li > a:hover"

For example, ".navbar.navbar-inverse .navbar-nav > li > a:hover".
Or "#page .navbar-inverse .navbar-nav > li > a:hover".

This will increase the CSS specificity of these rules and make them override other rules that make menu items gray.

[Doherty]

Really appreciate the help, I'm obviously not experienced and learning as I go

The line of code you mentioned above;
".navbar-inverse .navbar-nav > li > a:hover"

Is already within the CSS, 12th row.

[qualiteam]

Yes, it is in the custom CSS. But I believe there is another CSS file having the same selector, and since that file is loaded later, its rules override yours.

So, you should add one more tag, or a css class, to the selector. Like this:
".navbar.navbar-inverse .navbar-nav > li > a:hover".
Or this:
"#page .navbar-inverse .navbar-nav > li > a:hover".

Perhaps you need more extra selectors.

[rapidserverz]

i am having the similar issues no matter what code i put in the custom css the top menu has pink links can someone help heres my page for people to look what i mean also how do i get that background image to fill the whole page instead of just half way thanks in advance www.heinz57beans.com/xcart

[rapidserverz]

i have the same issue can someone please help me my navbar menu is staying a pink color no matter what code i put in css also have issue with background image only showing half screen please take a look at my page so you can see faults what i mean

[totaltec]

Originally Posted by rapidserverz

i have the same issue can someone please help me my navbar menu is staying a pink color no matter what code i put in css also have issue with background image only showing half screen please take a look at my page so you can see faults what i mean

Try:

#header-area .navbar-inverse.mobile-hidden .navbar-nav > li > a:hover {
    color: #fff;
}

[Doherty]

Hi guys,

I got mine working just fine using qualiteam's code;

#page .navbar-inverse .navbar-nav > li > a:hover {
background-color: #ff3300;
}