Making bootstrap navbar sticky only when navbar-collapse show

Question

I want to make my navbar into a fixed position only if the collapsed menu is shown. It seems I can only make it permanently fixed regardless of the collapse function trigger, which is not what I want.

This is what I have

<nav class="navbar navbar-expand-lg navbar-light bg-white align-items-stretch">
  <a href="{{ url('/') }}" class="navbar-brand">
    <img class="navbar-logo img-fluid" src="{{ asset('img/generic.png') }}">
  </a>
  <button class="navbar-toggler collapsed" data-toggle="collapse" data-target="#navbar_collapse" aria-expanded="false">
    <span class="navbar-toggler-icon "></span>
  </button>
  <div class="navbar-collapse collapse align-items-stretch bg-white" id="navbar_collapse">
  <!--collapse menu code-->
  </div>
</nav>

and in my css file to specify the navbar only on device version

    @media (max-width: 992px) {
        .navbar-fix  {
            position: fixed;
            top: 0;
            right: 0;
            left: 0;
            z-index: 10;
        }
    }

and my script

$( document ).ready(function() {
    $('.navbar').click(function(){
        $('.navbar.navbar-fixed').removeClass('navbar-fixed');
        $(this).addClass('navbar-fixed');
        console.log( "nav fix" );
    });
});

Which doesn't load it back to relative position when the collapse is hidden. And how can I specify so it's only fixed when I click on the toggler?

Answer 1

Since you are using navbar-expand-,g, navbar collapses when viewport width is less than 992px.

flex

First, use a container for the navbar and the main content of yor page.

<div>
  <nav class="navbar navbar-expand-md navbar-light bg-light">

  </nav>
  <main id"content">

  </main>
</div> 

As the name suggests, nav is for the navbar menu, and main is for the rest of your content.

1. Use h-100 class for all of the parents of the div including html and body.
2. Use d-flex, flex-column, and h-100 classes for the div.
3. Use flex-grow-1 and flex-lg-grow-0 for the main element.
4. Use overflow:auto/scroll for the main when the viewport is less than 992px.

html, body {
  height: 100%;
}

@media (max-width: 992px) {
  .overflow-y-auto {
    overflow-y: auto;
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex d-lg-block flex-column  bg-primary h-100 overflow-y-hidden">
  <nav class="navbar navbar-expand-md navbar-light bg-light navbar-fixed">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
      </form>
    </div>
  </nav>
  <main class="flex-grow-1 flex-lg-grow-0 overflow-y-auto">
    <div class="container ">
      <div class="row">
        <div class="col">
          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Debitis, ipsum tempore molestiae praesentium asperiores iusto quod, sit cum ab veniam laudantium quia assumenda accusantium velit dolorem magni culpa rem nemo.
          Aspernatur corrupti officia magni perferendis reiciendis iure nisi eius inventore ab soluta eum quidem non ipsum aut sunt facilis deserunt ea dolor, blanditiis vel vitae temporibus voluptatem harum. Voluptatibus, eos.
          Ducimus reprehenderit repudiandae nihil magnam est atque vitae distinctio. Ad, est consequuntur, maxime ut tenetur voluptate culpa praesentium modi, voluptas repellat magnam alias esse animi doloribus. Maxime non quas et?
          Harum, tenetur. Beatae deserunt ipsa reiciendis adipisci, est velit eligendi quod optio obcaecati magni consequuntur blanditiis expedita modi. Quasi vitae maxime voluptates alias ipsam, ex aspernatur nesciunt aperiam eveniet pariatur?
          Nemo, explicabo? Quasi repudiandae consectetur similique, adipisci vitae error quia recusandae, eos quas fugiat quae expedita nisi hic libero. Cum distinctio blanditiis magnam, esse deserunt commodi totam vero soluta. Reprehenderit.
          Distinctio qui exercitationem vero provident totam, quis molestias illo eius iusto at atque aliquam excepturi! Quos omnis tempore, aut tempora odit consectetur possimus, dolore voluptates enim iste distinctio, perspiciatis sapiente.
          Eius eos reiciendis quis aliquam dolorum earum, assumenda deserunt animi consectetur accusantium sit numquam doloremque minima! Illo tenetur aliquam ea dicta eaque. Aspernatur animi optio hic provident obcaecati dicta ex.
          Tempora sed expedita, sunt minus ab saepe itaque, inventore placeat dolores eos voluptates fugit facilis explicabo cum eius quod excepturi neque veritatis molestiae quia magni soluta corporis rerum vero? Dignissimos.
          Aliquid pariatur placeat delectus, repellendus atque ullam obcaecati animi. Fugiat, at architecto? Inventore illum quidem unde molestiae eveniet placeat veritatis doloremque autem, tempora non cum adipisci tenetur ex iure esse.
          Rem et quisquam ad nesciunt, ipsa eligendi. Ipsa, libero magnam ducimus nihil minima odio. Officia, amet cum? Fugit aliquid consectetur, veritatis consequatur accusamus accusantium harum ex, error repellat fugiat excepturi.
        </div>
      </div>
    </div>
  </main>
</div>

https://codepen.io/anon/pen/Xwdzav

fixed position

Use the same CSS you are using. But since, position fixed removes elements from the normal flow of the content, you need to use padding or margin top for the main content of your page. Its size should be more or equal to the height of the navbar.

@media (max-width: 992px) {
  .fixed-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10000000;
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-md navbar-light bg-light fixed-nav">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
      </form>
    </div>
  </nav>
  <main class="bg-primary pt-lg-0 pt-5">
    <div class="container ">
      <div class="row">
        <div class="col">
          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Debitis, ipsum tempore molestiae praesentium asperiores iusto quod, sit cum ab veniam laudantium quia assumenda accusantium velit dolorem magni culpa rem nemo.
          Aspernatur corrupti officia magni perferendis reiciendis iure nisi eius inventore ab soluta eum quidem non ipsum aut sunt facilis deserunt ea dolor, blanditiis vel vitae temporibus voluptatem harum. Voluptatibus, eos.
          Ducimus reprehenderit repudiandae nihil magnam est atque vitae distinctio. Ad, est consequuntur, maxime ut tenetur voluptate culpa praesentium modi, voluptas repellat magnam alias esse animi doloribus. Maxime non quas et?
          Harum, tenetur. Beatae deserunt ipsa reiciendis adipisci, est velit eligendi quod optio obcaecati magni consequuntur blanditiis expedita modi. Quasi vitae maxime voluptates alias ipsam, ex aspernatur nesciunt aperiam eveniet pariatur?
          Nemo, explicabo? Quasi repudiandae consectetur similique, adipisci vitae error quia recusandae, eos quas fugiat quae expedita nisi hic libero. Cum distinctio blanditiis magnam, esse deserunt commodi totam vero soluta. Reprehenderit.
          Distinctio qui exercitationem vero provident totam, quis molestias illo eius iusto at atque aliquam excepturi! Quos omnis tempore, aut tempora odit consectetur possimus, dolore voluptates enim iste distinctio, perspiciatis sapiente.
          Eius eos reiciendis quis aliquam dolorum earum, assumenda deserunt animi consectetur accusantium sit numquam doloremque minima! Illo tenetur aliquam ea dicta eaque. Aspernatur animi optio hic provident obcaecati dicta ex.
          Tempora sed expedita, sunt minus ab saepe itaque, inventore placeat dolores eos voluptates fugit facilis explicabo cum eius quod excepturi neque veritatis molestiae quia magni soluta corporis rerum vero? Dignissimos.
          Aliquid pariatur placeat delectus, repellendus atque ullam obcaecati animi. Fugiat, at architecto? Inventore illum quidem unde molestiae eveniet placeat veritatis doloremque autem, tempora non cum adipisci tenetur ex iure esse.
          Rem et quisquam ad nesciunt, ipsa eligendi. Ipsa, libero magnam ducimus nihil minima odio. Officia, amet cum? Fugit aliquid consectetur, veritatis consequatur accusamus accusantium harum ex, error repellat fugiat excepturi.
        </div>
      </div>
    </div>
  </main>

https://codepen.io/anon/pen/XwdzZr

You should use boostrap version 4.1 or higher because the lower version does not have flex-grow-1

---

You may find this link also helpful.

Flush footer to the bottom of the page in bootstrap 4

Answer 2

It's a little difficult to discern exactly what you are asking, but I'll give it a shot.

So, when you say...

I want to make my navbar into a fixed position only if the collapsed menu is shown. It seems I can only make it permanently fixed regardless of the collapse function trigger.

It seems as though you are having difficulty changing the navbar position attribute at the lg(992px) breakpoint. Without more content on the page, it's difficult to determine what's actually happening upon hitting the breakpoint. So, I inserted your snippet into my IDE, added some filler text and played around with Chrome's dev tools to see what was happening.

Let's breakdown the components at work here...

For navbar, the class "navbar-expand-lg" is saying to expand/show the navbar when the screen is 992px or more. So the collapsed version will display only when the size is less that 992px.

Now, your css snippet has a media query for the lg breakpoint(992px). Therefore, the styles inside @media codeblock will apply when the screen is 992px or less. Since the position attribute is being set to "fixed" inside this @media query, the navbar is being set to fixed when the screen is 992px or less.

Putting it all together, you

want to make my navbar into a fixed position only if the collapsed menu is shown.

Your collapsed menu is shown when screen size is less than 992px. Your @media query is setting the navbar to fixed when the screen size is less than 992px. What may fix your issue is setting the navbar position attribute specifically for when the screen is bigger than 992px.

If I didn't answer the right question, or if you were trying to remove the navbar completely except when collapsed is showing, look into the display setting to remove it at the lg breakpoint.

Hope this helps!