CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4
Merv Merzoug
Merv Merzoug

Reputation: 1237

Changing navbar background color while keeping toggle menu (hamburger)

I would like to have a custom color (#5f788a) for my navbar, however, I understand that in order to have the toggle menu in mobile version, the navbar class must be navbar-light or navbar-dark (according to Bootstrap). This, of course, overrides my custom navbar color and it looks like I have to choose between the hamburger menu OR my custom color.

Things I have tried:

1). Using ! important in CSS to override the styling; 2). Styling with the background-color attribute in CSS; 3). Styling body but this affects rest of site colors, not just navbar.

Here is the CSS:

body {
  background: #fafafa;
  color: #333333;
  margin-top: 5rem;
}

h1, h2, h3, h4, h5, h6 {
  color: #444444;
}

.bg-steel {
  background-color: #5f788a;
}

.site-header .navbar-nav .nav-link {
  color: #5f788a;
}

.site-header .navbar-nav .nav-link:hover {
  color: #ffffff;
}

.site-header .navbar-nav .nav-link.active {
  font-weight: 500;
}


.content-section {
  background: #ffffff;
  padding: 10px 20px;
  border: 1px solid #dddddd;
  border-radius: 3px;
  margin-bottom: 20px;
}

.article-title {
  color: #444444;
}

a.article-title:hover {
  color: #428bca;
  text-decoration: none;
}

.article-content {
  white-space: pre-line;
}

.article-img {
  height: 65px;
  width: 65px;
  margin-right: 16px;
}

.article-metadata {
  padding-bottom: 1px;
  margin-bottom: 4px;
  border-bottom: 1px solid #e3e3e3
}

.article-metadata a:hover {
  color: #333;
  text-decoration: none;
}

#parent {
    list-style: none;
    width: 100%;
    height: 90px;
    margin: 0;
    padding: 0;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
}

.article-svg {
  width: 25px;
  height: 25px;
  vertical-align: middle;
}

.account-img {
  height: 125px;
  width: 125px;
  margin-right: 20px;
  margin-bottom: 16px;
}

.account-heading {
  font-size: 2.5rem;
}

@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css");

And the of the site:

<body>
    <header class="site-header">

      <nav class="navbar navbar-default navbar-expand-md navbar-light fixed-top">
        <div class="container">

          <a class="navbar-brand mr-4" href="/">Company Name (v0.01)</a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarToggle">
            <div class="navbar-nav mr-auto">
              <a class="nav-item nav-link" href="/about">About</a>
            </div>

<!--            SEARCH BOX-->
<!--            <form class="form-inline my-2 my-lg-0">-->
<!--              <input class="form-control mr-sm-1" id="search_box" type="search" placeholder="Find some stuff..." aria-label="Search" align="middle">-->
<!--              <a href="{{ url_for('search_posts', keyword='sdf' ) }}"><button class="btn btn-outline-light my-2 my-sm-0 mr-5" type="submit" align="center">Search</button></a>-->
<!--            </form>-->

            <!-- Navbar Right Side -->
            <div class="navbar-nav">
                {% if current_user.is_authenticated %}
                    <a class="nav-item nav-link" href="/post/new">New Post</a>
                    <a class="nav-item nav-link" href="/send_invites">Invite</a>
                    <a class="nav-item nav-link" href="/account">My Account</a>
                    <a class="nav-item nav-link" href="/logout"><span class="glyphicon glyphicon-log-in"></span> Logout</a>
                {% else %}
                    <a class="nav-item nav-link" href="/login"><span class="glyphicon glyphicon-log-in"></span> Login</a>
                    <a class="nav-item nav-link" href="/register"><span class="glyphicon glyphicon-user"></span> Register</a>
                {% endif %}

            </div>
          </div>
        </div>
      </nav>

    </header>

Could it be that I should be trying to style the body? If so, wont that affect the rest of the site, not just the navbar? Thanks for your help

Upvotes: 0

Views: 2032

Answers (2)

GURU RAJ
GURU RAJ

Reputation: 21

you can just add:-

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">

Instead of what you wrote earlier

Upvotes: 0

SirFitz
SirFitz

Reputation: 41

navbar-light and navbar-dark are helper classes, what they do is change the colour of the text from white (if navbar-dark) to black (if navbar-light), so that the text colour on your navbar doesn't conflict with the navbar colours you can do this:

    .navbar {background-color: #5f788a;}

and add the class "navbar-dark" to your nav element.

This is assuming you're using the latest version of bootstrap, 4.3

Bootstrap 4.0.0 Demo below:

body {
  background: #fafafa;
  color: #333333;
  margin-top: 5rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #444444;
}

.bg-steel {
  background-color: #5f788a;
}

.site-header .navbar-nav .nav-link {
  color: #5f788a;
}

.site-header .navbar-nav .nav-link:hover {
  color: #ffffff;
}

.site-header .navbar-nav .nav-link.active {
  font-weight: 500;
}

.content-section {
  background: #ffffff;
  padding: 10px 20px;
  border: 1px solid #dddddd;
  border-radius: 3px;
  margin-bottom: 20px;
}

.article-title {
  color: #444444;
}

a.article-title:hover {
  color: #428bca;
  text-decoration: none;
}

.article-content {
  white-space: pre-line;
}

.article-img {
  height: 65px;
  width: 65px;
  margin-right: 16px;
}

.article-metadata {
  padding-bottom: 1px;
  margin-bottom: 4px;
  border-bottom: 1px solid #e3e3e3
}

.article-metadata a:hover {
  color: #333;
  text-decoration: none;
}

#parent {
  list-style: none;
  width: 100%;
  height: 90px;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}

.article-svg {
  width: 25px;
  height: 25px;
  vertical-align: middle;
}

.account-img {
  height: 125px;
  width: 125px;
  margin-right: 20px;
  margin-bottom: 16px;
}

.account-heading {
  font-size: 2.5rem;
}

@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css");
<!DOCTYPE html>
<!-- saved from url=(0044)https://stack.fleeksite.com/bootstrap-navbar -->
<html lang="en">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>TurboTobias</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>

<body>
  <header class="site-header">

    <nav class="navbar navbar-default navbar-expand-md navbar-dark fixed-top" style="background-color: rebeccapurple;">
      <div class="container">

        <a class="navbar-brand mr-4" href="https://stack.fleeksite.com/">Bench of Thoughts (v0.01)</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
        <div class="collapse navbar-collapse" id="navbarToggle">
          <div class="navbar-nav mr-auto">
            <a class="nav-item nav-link" href="https://stack.fleeksite.com/about">About</a>
          </div>

          <!-- Navbar Right Side -->
          <div class="navbar-nav">

            <a class="nav-item nav-link" href="https://stack.fleeksite.com/login"><span class="glyphicon glyphicon-log-in"></span> Login</a>
            <a class="nav-item nav-link" href="https://stack.fleeksite.com/register"><span class="glyphicon glyphicon-user"></span> Register</a>


          </div>
        </div>
      </div>
    </nav>

  </header>





</body>

</html>

Upvotes: 1

Related Questions