Shashanth Shashanth - 6 months ago 15
CSS Question

inside nav tag div tags are showing seperate after shrinking to small screen size in twitter bootstrap 3

I am trying to build a responsive navbar using

Twitter Bootstrap 3
. Now i am bulit navbar using
Bootstrap
, while i am going to small screen 2
<div>
inside my navbar showing separately.
Here is my code

<nav class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container-fluid">
<!-- 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=".navbar-collapse" 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="#">
Brand Name
</a>
</div>

<!-- Social Links -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="#">Home <span class="sr-only">(current)</span></a></li>
<li><a href="#">About</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><i class="fa fa-google" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-facebook-official" aria-hidden="true"></i></a></li>
<li><a href="#" data-toggle="modal" data-target="#myModal"><i class="fa fa-whatsapp" aria-hidden="true"></i></a></li>
</ul>
</div>
</div>
</nav>


and the output is here

I copied the navbar code from
Twitter Bootstrap
's official documentation.
What went wrong pls someone help.
Thanks in advance

.navbar-default{
font-family: 'Montserrat', sans-serif;
/*background-color: #009999 !important;*/
background: none;
/*border-color: #fff;*/
border: none;
}

.navbar-brand{
margin-top: 16px;
color: transparent !important;
}
.navbar-nav li a{
height: 80px;
line-height: 80px;
padding: 0 25px;
border: none;
}

.navbar-default .navbar-nav>li>a:link{
/*color: #fff;*/
/* color: #f97400;*/
color: rgba(249, 116, 0, 1); /* color #f97400 */
}

.navbar-default .navbar-nav>li>a:hover{
color: #ff0000;
/* background-color: #f97400;*/
border-bottom: #f0ad4e solid 4px; /* to show underline in navabar on mouse hover */
}

.navbar-default .navbar-nav>li>a:visited{
color:rgba(240, 173, 78, 1); /* color #f0ad4e */
}

.navbar-default .navbar-toggle{
border-color: #f0ad4e;
margin-top: 25px;
}

li.google a{
width: 80px;
font-size: 1.8em;
text-align: center;
box-shadow: none;
}

li.twitter a{
width: 80px;
font-size: 1.8em;
text-align: center;
box-shadow: none;
}

li.facebook a{
width: 80px;
font-size: 1.8em;
text-align: center;
box-shadow: none;
}

li.whatsapp a{
width: 80px;
font-size: 1.8em;
text-align: center;
box-shadow: none;
}

li.google a:hover,
li.twitter a:hover,
li.facbook a:hover,
li.whatsapp a:hover{
opacity: .8;
}

@media (max-width: 768px) {
.navbar-default .navbar-nav>li>a{
width: 100%;
text-align: center;
background-color: #fff;
color: #000 !important;
}
.navbar-default .navbar-nav>li>a:hover{
color: #ff0000;
background-color: rgba(249, 116, 0, 1);
border-bottom: #f0ad4e solid 4px; /* to show underline in navabar on mouse hover */
}
.navbar-brand{
font-family: 'Montserrat', sans-serif;
color: #fff !important;
}
}

.navbar-collapse{
margin-top: 0px;
margin-bottom: 0px;
margin-right: 0px;
margin-left: 0px;
}

.navbar-fixed-bottom {
position: relative; /* this can also be static */
}

Answer

I've recreated it with this code:

<html>

<head>
  <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
  <style>
    .navbar-default {
      font-family: 'Montserrat', sans-serif;
      /*background-color: #009999 !important;*/
      background: none;
      /*border-color: #fff;*/
      border: none;
    }
    .navbar-brand {
      margin-top: 16px;
      color: transparent !important;
    }
    .navbar-nav li a {
      height: 80px;
      line-height: 80px;
      padding: 0 25px;
      border: none;
    }
    .navbar-default .navbar-nav>li>a:link {
      /*color: #fff;*/
      /*    color: #f97400;*/
      color: rgba(249, 116, 0, 1);
      /* color #f97400 */
    }
    .navbar-default .navbar-nav>li>a:hover {
      color: #ff0000;
      /*    background-color: #f97400;*/
      border-bottom: #f0ad4e solid 4px;
      /* to show underline in navabar on mouse hover */
    }
    .navbar-default .navbar-nav>li>a:visited {
      color: rgba(240, 173, 78, 1);
      /* color #f0ad4e */
    }
    .navbar-default .navbar-toggle {
      border-color: #f0ad4e;
      margin-top: 25px;
    }
    li.google a {
      width: 80px;
      font-size: 1.8em;
      text-align: center;
      box-shadow: none;
    }
    li.twitter a {
      width: 80px;
      font-size: 1.8em;
      text-align: center;
      box-shadow: none;
    }
    li.facebook a {
      width: 80px;
      font-size: 1.8em;
      text-align: center;
      box-shadow: none;
    }
    li.whatsapp a {
      width: 80px;
      font-size: 1.8em;
      text-align: center;
      box-shadow: none;
    }
    li.google a:hover,
    li.twitter a:hover,
    li.facbook a:hover,
    li.whatsapp a:hover {
      opacity: .8;
    }
    @media (max-width: 768px) {
      .navbar-default .navbar-nav>li>a {
        width: 100%;
        text-align: center;
        background-color: #fff;
        color: #000 !important;
      }
      .navbar-default .navbar-nav>li>a:hover {
        color: #ff0000;
        background-color: rgba(249, 116, 0, 1);
        border-bottom: #f0ad4e solid 4px;
        /* to show underline in navabar on mouse hover */
      }
      .navbar-brand {
        font-family: 'Montserrat', sans-serif;
        color: #fff !important;
      }
    }
    .navbar-collapse {
      margin-top: 0px;
      margin-bottom: 0px;
      margin-right: 0px;
      margin-left: 0px;
    }
    .navbar-fixed-bottom {
      position: relative;
      /* this can also be static */
    }
  </style>
</head>

<body>
  <nav class="navbar navbar-default navbar-static-top" role="navigation">
    <div class="container-fluid">
      <!-- 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=".navbar-collapse" 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="#">
                    Brand Name
                </a>
      </div>

      <!-- Social Links -->
      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li><a href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li><a href="#">About</a>
          </li>
          <li><a href="#">Service</a>
          </li>
          <li><a href="#">Contact Us</a>
          </li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#"><i class="fa fa-google" aria-hidden="true"></i></a>
          </li>
          <li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
          </li>
          <li><a href="#"><i class="fa fa-facebook-official" aria-hidden="true"></i></a>
          </li>
          <li><a href="#" data-toggle="modal" data-target="#myModal"><i class="fa fa-whatsapp" aria-hidden="true"></i></a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</body>

</html>

And then I don't get the error. Is it possible that another picture is in the background?

The Menu is a overlay on you page and I think that you menu items have transparent background. So i think the fix is changing you CSS

.navbar-nav li a {
  height: 80px;
  line-height: 80px;
  padding: 0 25px;
  border: none;
  background-color:#ffffff; /* THE FIX */
}

Hope this helps.