Member Avatar for davy_yg

Hello,

Cek this navigation bootstrap page:

I wonder how to change the color of the menu bar?

Is there any way to do that?

  • 4 Contributors
  • 7 Replies
  • 190 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by davy_yg

Dani AI

Generated

Short consolidation of the thread and a practical approach.

was right to point at the navbar rules, and / showed the correct place to override the background. The original attempt in post #3 changed the CSS color (that only affects text) instead of the background, which is why the bar did not change. The usual causes when an override “doesn’t work” are selector specificity or stylesheet order — custom.css must load after Bootstrap, and it helps to add a small custom class so you don’t fight framework selectors.

Add a small wrapper class to the navbar and override background and height cleanly:

/* add class="site-navbar" to the navbar element */
.site-navbar .navbar-inner {
  min-height: 56px;        /* increase overall navbar height */
  background-color: #655700;
  background-image: none;  /* remove Bootstrap gradient */
}

/* vertical centering for brand and links */
.site-navbar .brand,
.site-navbar .nav > li > a {
  line-height: 56px;
  padding-top: 0;
  padding-bottom: 0;
}

To change the collapsed “hamburger” button height and the bar spacing, target the button and its bars:

.site-navbar .btn-navbar {
  height: 48px;
  padding: 6px 10px;
  margin-top: 4px; /* tweak to vertically align the button */
}

.site-navbar .btn-navbar .icon-bar {
  height: 4px;     /* thicker bars */
  margin: 6px 0;   /* more space between bars */
  border-radius: 1px;
}

Troubleshooting notes: use DevTools (Inspector) to check the computed style and which rule wins; increase specificity or move the rule into the last stylesheet before </head>; avoid !important except as a last resort. If the project uses Bootstrap 3+, the toggle selectors changed (.navbar-toggle / .icon-bar) so adapt selectors accordingly. Keep touch targets at least ~44px tall for accessibility when increasing sizes.

Recommended Answers

All 7 Replies

Member Avatar for pritaeas

Change the color of .navbar-inverse

Member Avatar for davy_yg

I try this. No color changes.

custom.css

.navbar-inverse { color: #655700; }

bootstrap-responsive.css

.navbar-inverse { color: #655700; }
  .navbar-inverse .nav-collapse .nav > li > a,
  .navbar-inverse .nav-collapse .dropdown-menu a {
    /* color: #999999; */
    color: #655700;
  }
  .navbar-inverse .nav-collapse .nav > li > a:hover,
  .navbar-inverse .nav-collapse .nav > li > a:focus,
  .navbar-inverse .nav-collapse .dropdown-menu a:hover,
  .navbar-inverse .nav-collapse .dropdown-menu a:focus {
    background-color: #655700;
  }
Edited by davy_yg
Member Avatar for tobyITguy

Change the background-image property of .navbar-inverse .navbar-inner

.navbar-inverse .navbar-inner{
background-image: linear-gradient(to bottom,#655700,#655700);
}

Hope this helps!

Member Avatar for mattster

bootstrap.min.css, line 9: .navbar-inverse .navbar-inner is the one to change.

Or a quick fix would be to overwrite it with this:

.navbar-inverse .navbar-inner {
    background:#00ccff !important;
}
Member Avatar for davy_yg

I try that. and still remains the same.

5_5_6_navbar_inverted.html

<!DOCTYPE html>
<html>
    <head>
        <title>Navigation Bar Inverted</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">        
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link href="css/bootstrap-responsive.css" rel="stylesheet">
        <link href="css/custom.css" rel="stylesheet">
    </head>

    <body>

            <div class="container" > 
            <div class="navbar navbar-inverse" style="position: static;">
              <div class="navbar-inner">
                <div class="container">
                  <a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-inverse-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                  </a>
                  <a class="brand" href="#">Title</a>
                  <div class="nav-collapse collapse navbar-inverse-collapse">
                    <ul class="nav">
                      <li class="active"><a href="#">Home</a></li>
                      <li class="active"><a href="#">About</a></li>
                      <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Portfolio<b class="caret"></b></a>
                        <ul class="dropdown-menu">
                          <li><a href="#">Portfolio 1</a></li>
                          <li><a href="#">Portfolio 2</a></li>  
                        </ul>
                      </li>
                      <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Blog<b class="caret"></b></a>
                        <ul class="dropdown-menu">
                          <li><a href="#">Blog 1</a></li>
                          <li><a href="#">Blog 2</a></li>
                        </ul>
                      </li>
                      <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Contact Us<b class="caret"></b></a>
                        <ul class="dropdown-menu">
                          <li><a href="#">Contact Us1</a></li>
                          <li><a href="#">Contact Us2</a></li>
                        </ul>
                      </li>
                    </ul>

                  </div><!-- /.nav-collapse -->
                </div>
              </div><!-- /navbar-inner -->
            </div><!-- /navbar -->                    
          </div> 

      <script src="js/jquery.js"></script>
      <!-- Bootstrap javascript -->
      <script src="js/bootstrap.min.js"></script>
    </body>
</html>

custom.css

.navbar-inverse .nav-collapse .navbar-search {
    border-top-color: #8a1e1a;
    border-bottom-color: #8a1e1a;
}

.navbar-inverse { color: #655700; }

.navbar-inverse .navbar-inner{
    background-image: linear-gradient(to bottom,#655700,#655700);
}

.navbar-inverse .navbar-inner {
    background:#00ccff !important;
}
Member Avatar for tobyITguy

You put the two corrections at the same time. Wrong.

Try my suggestion separetly and then try mattster's.

One should work.

Member Avatar for davy_yg

ok, I successfully change the color of the navigation bar.

What about changing the height of the navigation bar button?

How to do so?

Edited by davy_yg
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.