2

I've tried customizing my navbar, I've copied the basic navbar from the bootstrap site for 3.0. Now, my nav does not change into a burger nav, the custom background image i'm using for the nav sticks, the logo sticks, but the nav buttons disappear. I'm presuming they turn into a burger below the background image or off screen.

.navbar {
  background: url(../images/mainnav.png) no-repeat top center;
  border-radius: 0;
  border: 0;
  height: 100px;
  width: 980px;
  margin: 0 auto;
  display: block;
}

.navspace {
  padding: 30px 46px 30px 46px;
}

.navposition {
  margin-left: 100px;
}

.navbar-brand {
  padding: 0;
  position: relative;
  left: 40px;
  top: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container nopadding">
    <nav class="navbar navbar-default navbar-static-top">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data- toggle="collapse" data-target="bs-example-navbar-collapse-1" aria- expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>max-width: 100%
                <a class="navbar-brand" href="#"><img src="images/logo.png" alt=""></a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -
    ->
        <div class="collapse navbar-collapse" id="bs-example-navbar-
    collapse-1">
          <ul class="nav navbar-nav">
              </ul>
            </li>
          </ul>
          <ul class="nav navbar-nav navposition">
            <li class="navspace"><a href="#">Home</a></li>
            <li class="navspace"><a href="#">Menu</a></li>
            <li class="navspace"><a href="#">Location</a></li>
            <li class="navspace"><a href="#">Contact Us</a></li>
          </ul>
        </div><!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
    </nav>
    <div class="row">
        <div class="col-sm-12 banner ">
            <p>10% off all pizzas
                <br>this weekend only</p>
            <h1>LIMITED TIME<br>ONLY</h1>
        </div>
    </div>
    <div class="row thumbnails">
        <div class="col-sm-offset-1 col-sm-3">
            <img src="images/bodyimg.png" alt="">
        </div>
        <div class="col-sm-offset-1 col-sm-3"></div>
        <div class="col-sm-offset-1 col-sm-3"></div>
    </div>
    <div class="row">
        <div class="col-sm-offset-1 col-sm-3"></div>
        <div class="col-sm-offset-1 col-sm-3"></div>
        <div class="col-sm-offset-1 col-sm-3"></div>
    </div>
    <div class="row">
        <div class="col-sm-12"></div>
    </div>
</div>

2
  • check this it might help
    – guradio
    Nov 27, 2017 at 10:22
  • what is that? </button>max-width: 100% Nov 27, 2017 at 10:25

2 Answers 2

0

There are a bunch of problems with your HTML. Some elements are commented out, surplus of closing tags like </li> or </ul>, also you have max-width:100% in your html. That has no business being there.

Regarding your question, the problem is that you set .navbar { width:980px } so ofcourse that when you are on a screen smaller than 980px not all the .navbar will be visible ( the right side of the navbar doesn't fit inside the screen ) so the burger menu is there but is not visible because the navbar is larger than the screen

If you want your .navbar to be of 980px but also responsive ( scale when screen smaller ) , use max-width:980px

see below

.navbar {
  background: url(../images/mainnav.png) no-repeat top center;
  border-radius: 0;
  border: 0;
  height: 100px;
  max-width: 980px;
  margin: 0 auto;
  display: block;
}

.navspace {
  padding: 30px 46px 30px 46px;
}

.navposition {
  margin-left: 100px;
}

.navbar-brand {
  padding: 0;
  position: relative;
  left: 40px;
  top: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="container nopadding">
  <nav class="navbar navbar-default navbar-static-top">
    <div class="container">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data- toggle="collapse" data-target="bs-example-navbar-collapse-1" aria- expanded="false">
          <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="#"><img src="images/logo.png" alt=""></a>
      </div>

      <!-- Collect the nav links, forms, and other content for toggling -
->
    <div class="collapse navbar-collapse" id="bs-example-navbar-
collapse-1">
      <ul class="nav navbar-nav">
          </ul>
        </li>
      </ul>
      <ul class="nav navbar-nav navposition">
        <li class="navspace"><a href="#">Home</a></li>
        <li class="navspace"><a href="#">Menu</a></li>
        <li class="navspace"><a href="#">Location</a></li>
        <li class="navspace"><a href="#">Contact Us</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
  </nav>

  <div class="row">
    <div class="col-sm-12 banner ">
      <p>10% off all pizzas
        <br>this weekend only</p>
      <h1>LIMITED TIME<br>ONLY</h1>
    </div>
  </div>

  <div class="row thumbnails">
    <div class="col-sm-offset-1 col-sm-3">
      <img src="images/bodyimg.png" alt="">
    </div>
    <div class="col-sm-offset-1 col-sm-3"></div>
    <div class="col-sm-offset-1 col-sm-3"></div>
  </div>

  <div class="row">
    <div class="col-sm-offset-1 col-sm-3"></div>
    <div class="col-sm-offset-1 col-sm-3"></div>
    <div class="col-sm-offset-1 col-sm-3"></div>
  </div>

  <div class="row">
    <div class="col-sm-12"></div>
  </div>
</div>

4
  • Thank you, the burger appears now, small question do you happen to know how to have my custom background image change to a solid color background it's smaller? Nov 27, 2017 at 11:37
  • you can use media queries for that. for example @media only screen and (max-width: 767px) { .navbar { background-image:none;background-color:red;} }
    – Mihai T
    Nov 27, 2017 at 11:46
  • Accepted! I've added that to my CSS but nothing has changed. Nov 27, 2017 at 12:27
  • @LukeSciberras well. at what screen size do you want your background to change from image to color ?
    – Mihai T
    Nov 27, 2017 at 12:52
-2

I've had the same problem. The solution for me was setting the background-color for the icon bars in css:

.icon-bar {
    background-color: black;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.