CODEWITHSUNDEEP
csstwitter-bootstrap-3
Monsoon Malabar
Monsoon Malabar

Reputation: 65

Bootstrap 3 Navbar overlaps

I use following code in my site for menu with bootstrap 3,

<html>
  <head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<!-- Latest compiled and minified JavaScript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
  </head>
  <body>
    <nav class="navbar navbar-default" style="background: rgba(255,255,255,0.5);">
      <div class="container-fluid">
      <div class="navbar-header pull-left">
      <a href="/" class="navbar-left" style="margin-top: 5px;">Title</a>      
      </div>
        <div class="navbar-header pull-right">
        <ul class="nav pull-left">

            <li class="dropdown pull-right">
              <a href="#" data-toggle="dropdown" style="margin-top: 5px;" class="dropdown-toggle btn btn-info"><i class="fas fa-spin text-warning fa-bolt"></i>വിഭാഗങ്ങൾ<b class="caret"></b></a>
              <ul class="dropdown-menu">
              <li><a target="_blank" href="#">test1</a></li>
              <li><a target="_blank" href="#">test1</a></li>
              <li><a target="_blank" href="#">test1</a></li>
              <li><a target="_blank" href="#">test1</a></li>      
              <li><a target="_blank" href="#">test1</a></li>
              <li><a target="_blank" href="#">test1</a></li> 
              <li><a target="_blank" href="#">test1</a></li>
              <li><a target="_blank" href="#">test1</a></li>
              <li><a target="_blank" href="#">test1</a></li>
              <li><a target="_blank" href="#">test1</a></li>         
              </ul>
            </li>
          </ul>
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <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-right" id="bs-example-navbar-collapse-1">


          <ul class="nav navbar-nav pull-left">

              <li><a target="_blank" class="btn btn-primary" href="#">test1</a></li>
              <li><a target="_blank" href="#">test1</a></li>
              <li><a href="/users/sign_up">Sign up</a></li>
              <li><a href="/users/sign_in">Log in</a></li>

          </ul>
        </div>
      </div>
    </nav>
  </body>
</html>

Here is the demo of the code. When I click collapsible three lines The revealed content overlapse with navbar. How to fix it? I tried changing padding and some pull-left and pull-right. But not working. Can you point out the error I did in the code?

Upvotes: 0

Views: 37

Answers (1)

Akhil Aravind
Akhil Aravind

Reputation: 6130

You can add a margin-top to the bs-example-navbar-collapse-1

#bs-example-navbar-collapse-1{
  margin-top:50px;
}

Here is the working fiddle Here

Upvotes: 1

Related Questions