CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4
Art Croix
Art Croix

Reputation: 43

Prevent collapsed navbar from pushing content below

I'm using bootstrap 4.1

I have the following structure: 

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>


<nav class="navbar navbar-expand-lg bg-transparent navbar-dark align-items-end ">
  <button class="navbar-toggler navbar-toggler-left" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
        <span class="navbar-toggler-icon"></span>
      </button>
  <div class="collapse navbar-collapse " id="collapsibleNavbar">
    <ul class="navbar-nav mr-auto ">
      <li class="nav-item">
        <a class="nav-link" href="#">News</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Documents</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>

    </ul>
    <ul class="navbar-nav ">
      <li class="nav-item ">
        <a class="nav-link" style="font-weight:300; display:inline-block" href="">RUS</a>
        <font style="font-weight:300" color="white">|</font><a style="font-weight:300;display:inline-block" class="nav-link" href="">ENG</a>
      </li>
    </ul>



  </div>

  <ul class="navbar-nav">
    <li class="nav-item ">
      <a class="nav-link" style="font-weight:300;" href=""><i class="fas fa-user fa-sx"></i>&nbsp;&nbsp;Login</a>
    </li>
  </ul>


</nav>


<div class="d-flex   flex-column" style="border:3px solid green;height:720px; ">
  Some content
</div>

On small screens my navbar collapses and it works fine, but when I clik "burger icon" .collapse pushes content placed below.

Is there some way to prevent this? I want that revealed div cover part of content but not expand it.

I tried this advice, but seems it doesn't befit for navbar.

Please, help.

Upvotes: 0

Views: 3571

Answers (1)

Praveen Murali
Praveen Murali

Reputation: 741

Try adding fixed-top class to your navbar element. It may help you.

Documentation page - https://getbootstrap.com/docs/4.1/components/navbar/#placement

<nav class="navbar fixed-top navbar-light bg-light">
  <a class="navbar-brand" href="#">Fixed top</a>
</nav>

Upvotes: 4

Related Questions