CODEWITHSUNDEEP
csscolors
xif
xif

Reputation: 343

Background top-menu css color

Css code :

.sf-menu {
  position: relative;
  padding: 0;
  width: 100%;
  border-bottom: 3px solid #e9e9e9;
  background: #ffffff; 
}

@media (max-width: 767px) {
  .sf-menu {
    display: none;
  }
}

Site :

http://www.sapins-noel.fr/

Try to change background color top menu, default value is #cbccbe; (grey) i've write #ffffff (white) but nothing change, anyone have a clue ?

Upvotes: 0

Views: 88

Answers (2)

Joe Corby
Joe Corby

Reputation: 552

#header .sf-menu

is taking priority as it's the parent. If you really want to bypass that then - 

.sf-menu {  
    position: relative;
    padding: 0;
    width: 100%;
    border-bottom: 3px solid #e9e9e9;
    background: #ffffff !important;
}

Upvotes: 2

Turnip
Turnip

Reputation: 36702

You need to use a more specific selector.

The background colour is being set with this:

#header .sf-menu {
    background: #cbccbe;
    border-bottom: 3px solid #c1c2b4;
}

It looks like you are trying to change the colour with this:

.sf-menu {
    position: relative;
    background: #ffffff;
    padding: 0;
    width: 100%;
    border-bottom: 3px solid #e9e9e9;
}

The first selector is more specific than yours so it will take precedence.

Add #header in front of your selector and the specificity score will be equal. As long as your code is after the default, it will take precedence and override it.

Further reading

Upvotes: 2

Related Questions