Can't change background-color of class "menu"

Question

I want to change color of class "menu" but I don't know why when I call class "menu" on css like below, it doesn't change. Can you suggest me a better CSS reset, or any other solution?

.menu{
 background-color: black;}


<div class="menu">
<div class="container">
  <nav class="navbar navbar-expand offset-3 fixed-top">
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapse-menu">
       <span class="navbar-toggler-icon"></span>
     </button>
    <div class="collapse navbar-collapse" id ="collapse-menu">
      <ul class="nav">
        <li class="nav-item">
          <a class="nav-link" href="#gioithieu">ABOUT</a> 
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#portfolio">PORTFOLIO</a> 
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#contact">CONTACT</a> 
        </li>
      </ul>
    </div>
  </nav>
</div>

background-color property probably already set on "containter" class or for nav. Check for that in your CSS. — Захар Joe, Apr 28 '18 at 08:46
It can not, because I have a lot of classes "container" below. I tried add id nested div but when I call this id on css, it doesn't change. — Nguyen Thuy Trang, Apr 28 '18 at 08:54

Denis Potapov · Accepted Answer · 2018-04-28T09:46:01.413

Your background is not displayed as the .menu collapses and has zero height and width. This happens because the child has a position: fixed and drops out of the parent thread. You can also use the Bootstrap 4 classes to define background-color.

<div class="menu fixed-top">
    <div class="container">
      <nav class="navbar navbar-expand offset-3">
         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapse-menu">
           <span class="navbar-toggler-icon"></span>
         </button>
        <div class="collapse navbar-collapse" id="collapse-menu">
          <ul class="nav">
            <li class="nav-item">
              <a class="nav-link" href="#gioithieu">ABOUT</a> 
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#portfolio">PORTFOLIO</a> 
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#contact">CONTACT</a> 
            </li>
          </ul>
        </div>
      </nav>
    </div>
</div>

https://www.codeply.com/go/jEbcp1KvQW

ralp dexter Bongato · Answer 2 · 2018-04-28T08:53:45.413

0

try using !important like this

<style>
    .menu
    {
     background-color: black!important;
    }
</style>

edited Apr 28 '18 at 08:53

answered Apr 28 '18 at 08:35

ralp dexter Bongato

31
4

Still can't change – Nguyen Thuy Trang Apr 28 '18 at 08:38
the best thing you can do here is try to ctlrl + shift + i click 'elements' and search for the class="menu" then check for the styles if there is some css overriding yours. and remove it. – ralp dexter Bongato Apr 28 '18 at 08:56

score -1 · Answer 3 · answered Apr 28 '18 at 08:35

-1

Try this:

<style>
.menu{
 background-color: black !important;
}
</style>

answered Apr 28 '18 at 08:35

Sazzad Hussain

321
1
3
11

Still can't change. – Nguyen Thuy Trang Apr 28 '18 at 08:38
Or try this if you want only navbar color to be changed `.navbar { background-color: #F8F8F8; border-color: #E7E7E7; }` – Sazzad Hussain Apr 28 '18 at 08:40
PS: Add custom css after bootstrap css else it will override. – Sazzad Hussain Apr 28 '18 at 08:41
But class "navbar" nested class "container". I think it not useful. – Nguyen Thuy Trang Apr 28 '18 at 08:46
Don't add nav into container. – Sazzad Hussain Apr 28 '18 at 08:49
I want to add this to gird system. – Nguyen Thuy Trang Apr 28 '18 at 08:56
In this case you must try inline css in navbar with `!imporant` – Sazzad Hussain Apr 28 '18 at 08:58

Can't change background-color of class "menu"

3 Answers3