Bootstrap navbar toggle button disappears on smaller screen sizes - Twitter bootstrap

ElaBuwa
December 29, 2016
216 views
3 votes
3 Answers

My navbar totally disappears and I am only left with the text in the navbar-brand class. I don’t even get the toggle button.

Any help is greatly appreciated.

#custom-bootstrap-menu.navbar-default .navbar-brand {
  color: rgba(171, 106, 106, 1);
}
#custom-bootstrap-menu.navbar-default {
  font-size: 14px;
  background-color: rgba(255, 255, 255, 1);
  border-width: 0px;
  border-radius: 4px;
}
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a {
  color: rgba(0, 0, 0, 1);
  background-color: rgba(255, 255, 255, 1);
}
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:focus {
  color: rgba(27, 219, 81, 1);
  background-color: rgba(255, 255, 255, 1);
}
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a,
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:focus {
  color: rgba(14, 145, 40, 1);
  background-color: rgba(255, 255, 255, 1);
}
#custom-bootstrap-menu.navbar-default .navbar-toggle {
  border-color: #ffffff;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle:hover,
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus {
  background-color: #ffffff;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle .icon-bar {
  background-color: #ffffff;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle:hover .icon-bar,
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus .icon-bar {
  background-color: #ffffff;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div id="custom-bootstrap-menu" class="navbar navbar-default " role="navigation">
  <div class="container-fluid">

    <div class="navbar-header">
      <a class="navbar-brand" href="#">Image</a>
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>

    <div class="collapse navbar-collapse navbar-menubuilder">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="/">Home</a>
        </li>
        <li><a href="/products">Products</a>
        </li>
        <li><a href="/about-us">About Us</a>
        </li>
        <li><a href="/contact">Contact Us</a>
        </li>
      </ul>
    </div>

  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

It is probably some minor detail but I am missing it regardless of the tutorials.

Thank you in advance.

Answers

The menu is not disappearing, you are setting it’s color to white in your custom css (last few kines of your code). I changed it to red here.

#custom-bootstrap-menu.navbar-default .navbar-brand {
  color: rgba(171, 106, 106, 1);
}
#custom-bootstrap-menu.navbar-default {
  font-size: 14px;
  background-color: rgba(255, 255, 255, 1);
  border-width: 0px;
  border-radius: 4px;
}
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a {
  color: rgba(0, 0, 0, 1);
  background-color: rgba(255, 255, 255, 1);
}
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:focus {
  color: rgba(27, 219, 81, 1);
  background-color: rgba(255, 255, 255, 1);
}
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a,
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:focus {
  color: rgba(14, 145, 40, 1);
  background-color: rgba(255, 255, 255, 1);
}
#custom-bootstrap-menu.navbar-default .navbar-toggle {
  border-color: #ffffff;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle:hover,
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus {
  background-color: red;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle .icon-bar {
  background-color: red;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle:hover .icon-bar,
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus .icon-bar {
  background-color: white;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div id="custom-bootstrap-menu" class="navbar navbar-default" role="navigation">
  <div class="container-fluid">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Image</a>
    </div>

    <div class="collapse navbar-collapse navbar-menubuilder">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="/">Home</a>
        </li>
        <li><a href="/products">Products</a>
        </li>
        <li><a href="/about-us">About Us</a>
        </li>
        <li><a href="/contact">Contact Us</a>
        </li>
      </ul>
    </div>

  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

That is happening because you set the color to #ffffff so it’s not disappearing just because of same background color not visualizing. Just changed to #000000 and it looks fine.

#custom-bootstrap-menu.navbar-default .navbar-brand {
  color: rgba(171, 106, 106, 1);
}
#custom-bootstrap-menu.navbar-default {
  font-size: 14px;
  background-color: rgba(255, 255, 255, 1);
  border-width: 0px;
  border-radius: 4px;
}
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a {
  color: rgba(0, 0, 0, 1);
  background-color: rgba(255, 255, 255, 1);
}
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:focus {
  color: rgba(27, 219, 81, 1);
  background-color: rgba(255, 255, 255, 1);
}
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a,
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:focus {
  color: rgba(14, 145, 40, 1);
  background-color: rgba(255, 255, 255, 1);
}
#custom-bootstrap-menu.navbar-default .navbar-toggle {
  border-color: #000000;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle:hover,
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus {
  background-color: #ffffff;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle .icon-bar {
  background-color: #000000;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle:hover .icon-bar,
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus .icon-bar {
  background-color: #ffffff;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div id="custom-bootstrap-menu" class="navbar navbar-default" role="navigation">
  <div class="container-fluid">

    <div class="navbar-header"><a class="navbar-brand" href="#">Image</a>
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>

    <div class="collapse navbar-collapse navbar-menubuilder">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="/">Home</a>
        </li>
        <li><a href="/products">Products</a>
        </li>
        <li><a href="/about-us">About Us</a>
        </li>
        <li><a href="/contact">Contact Us</a>
        </li>
      </ul>
    </div>

  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

#custom-bootstrap-menu.navbar-default .navbar-brand {
  color: rgba(171, 106, 106, 1);
}
#custom-bootstrap-menu.navbar-default {
  font-size: 14px;
  background-color: rgba(255, 255, 255, 1);
  border-width: 0px;
  border-radius: 4px;
}
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a {
  color: rgba(0, 0, 0, 1);
  background-color: rgba(255, 255, 255, 1);
}
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:focus {
  color: rgba(27, 219, 81, 1);
  background-color: rgba(255, 255, 255, 1);
}
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a,
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:focus {
  color: rgba(14, 145, 40, 1);
  background-color: rgba(255, 255, 255, 1);
}
#custom-bootstrap-menu.navbar-default .navbar-toggle {
  border-color: #ffffff;
  background: #ccc;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle:hover,
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus {
  background-color: #ccc;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle .icon-bar {
  background-color: #ffffff;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle:hover .icon-bar,
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus .icon-bar {
  background-color: #ffffff;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div id="custom-bootstrap-menu" class="navbar navbar-default " role="navigation">
  <div class="container-fluid">

    <div class="navbar-header"><a class="navbar-brand" href="#">Image</a>
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>

    <div class="collapse navbar-collapse navbar-menubuilder">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="/">Home</a>
        </li>
        <li><a href="/products">Products</a>
        </li>
        <li><a href="/about-us">About Us</a>
        </li>
        <li><a href="/contact">Contact Us</a>
        </li>
      </ul>
    </div>

  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

Please signup or login to give your own answer.

Click here to cancel reply.

Bootstrap navbar toggle button disappears on smaller screen sizes – Twitter bootstrap

Answers