1

I have two top navbars in a page. One of them is fixed while another is sticky but when I scroll down the sticky navbar doesn't stick on top of the fixed navbar:

and when I scroll down the sticky navbar disappears:

[[2]

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar fixed-top navbar-dark bg-dark navbar-expand-lg">  
      <a href="http://127.0.0.1:8000/"class="navbar-brand">My Django App</a>
      <ul class="navbar-nav ml-auto">
        <li class="nav-item"><a href="http://127.0.0.1:8000/"class="nav-link">Home Page</a></li>
        <li class="nav-item"><a href="http://127.0.0.1:8000/signup" class="nav-link">Sign Up</a></li>
      </ul>
    </nav> 
    
    {% if data %}
    <div class="row">
      <div class="col col-lg-1"></div>
      <div class="col col-lg-8">
        <nav class="navbar sticky-top navbar-dark bg-dark ">
          <a class="navbar-brand display-4">List of Users</a>
        </nav>
      </div>  
    </div>
  • The behaviour after removing row and col divs here after scrolling downhere but by this the django brand is ovarlaped,I want it to align at the center
  • edited code of users navbar
<nav class="navbar sticky-top navbar-dark bg-dark">
                    <a class="navbar-brand display-4">List of Users</a>

 </nav>
Sarthak Kumar
  • 304
  • 5
  • 16
  • What is the desired behaviour? When you say "the sticky navbar doesn't stick on top of the fixed navbar", do you mean "top" as in `z-index`? Or do you want your "Django App" navbar always on top and "List of User" stick to the Django navbar? – Bruno Monteiro Jan 23 '20 at 22:36
  • yes! i want the "Django App" navbar always on top and "list of user" stick to the "Django App" navbar – Sarthak Kumar Jan 23 '20 at 22:45

3 Answers3

2

I think the simplest option is to add padding-top on the body, and set z-index:-1 on the fixed navbar.

https://codeply.com/p/j3RFVB52OQ

body {
    padding-top: 56px;
}

.fixed-top {
    z-index: -1;
}

Then the HTML structure is...

<nav class="navbar fixed-top navbar-dark bg-dark navbar-expand-lg">
    <a href="" class="navbar-brand">My Django App</a>
    <ul class="navbar-nav ml-auto">
        <li class="nav-item"><a href="http://127.0.0.1:8000/" class="nav-link">Home Page</a></li>
        <li class="nav-item"><a href="http://127.0.0.1:8000/signup" class="nav-link">Sign Up</a></li>
    </ul>
</nav>
<div class="container sticky-top">
    <nav class="navbar navbar-dark bg-dark">
        <a href class="navbar-brand">List of Users</a>
    </nav>
</div>
<div class="container">
    <div class="row">
       scrollable content ...
    </div>
</div>

This is similar to: Bootstrap 4 Multiple fixed-top navbars

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
1

I see two options, depending on your project:

Option 1: Specific height

If you know that the height of your "Django bar" will never change, you can hardcode that, so your "Users bar" will be fixed on that position. Your "Users bar" would look like this:

<div class="row sticky-top" style="top: 56px">
  <div class="col col-lg-1"></div>
  <div class="col col-lg-8">
    <nav class="navbar navbar-dark bg-dark">
      <a href="#" class="navbar-brand display-4">List of Users</a>
    </nav>
  </div>  
</div>

Example here

Option 2: Create your own navbar

This would give you more flexibility to achieve more "unique" layouts. The downside, of course, is that will be up to you to configure the mobile layout and handle other things that Bootstrap usually handles for you. Not saying you should do everything by yourself, you can still use Bootstrap helper classes, but make your own navbar.

HTML:

<div class="custom-navbar">
    <a href="http://127.0.0.1:8000/"class="custom-brand">My Django App</a>
    <ul class="custom-navbar-ul ml-auto">
        <li class="nav-item"><a href="http://127.0.0.1:8000/"class="custom-link">Home Page</a></li>
        <li class="nav-item"><a href="http://127.0.0.1:8000/signup" class="custom-link">Sign Up</a></li>
    </ul>
</div>
<div class="row">
    <div class="col col-lg-1"></div>
    <div class="col col-lg-8">
        <nav class="navbar navbar-dark bg-dark">
            <a href="#" class="navbar-brand display-4">List of Users</a>
        </nav>
    </div>  
</div>

CSS:

.custom-navbar {
    background-color: #343a40;
    color: #fff;
    display: flex;
    padding: .5rem 1rem;
    align-items: center;
    flex-flow: row nowrap;
}

.custom-navbar .custom-brand {
    color: #fff;
    display: inline-block;
    padding-top: .3125rem;
    padding-bottom: .3125rem;
    margin-right: 1rem;
    font-size: 1.25rem;
    line-height: inherit;
    white-space: nowrap;
}

.custom-navbar-ul {
    display: flex;
    list-style: none;
    padding-left: 0;
   margin-bottom: 0;
}

.custom-navbar-ul .custom-link {
    color: rgba(255,255,255,.5);
    padding-right: .5rem;
   padding-left: .5rem;
}

Example here

Bruno Monteiro
  • 4,153
  • 5
  • 29
  • 48
  • Thanks for your effort but by both options the "user list" navbar stick below to the "Django App" navbar but what I want to do is to overlap the django navbar and stick on top of the page by scrolling down.When I remove row and col divs this happens but with the row and col div the users navbar disappears. I am adding the behaviour of the navbars in the questions. – Sarthak Kumar Jan 24 '20 at 09:18
  • when i put the user navbar in a row or a container divs it stop sticking on top of the page and if i don't use them then the django brand is overlapped. – Sarthak Kumar Jan 24 '20 at 09:41
  • Well, that's different behaviour from your answer to my comment. But glad you found a solution. – Bruno Monteiro Jan 27 '20 at 19:45
-1

Add class to the navbar on scroll:

<nav class="navbar sticky-top navbar-dark bg-dark navbar-fixed-top">

Add navbar-fixed-top and it will stay right where you want it.

Documentation: https://getbootstrap.com/components/#navbar-fixed-top

Jiri Otoupal イり オトウパー
  • 591
  • 3
  • 15