Navbar stick-top with body 100%

Asked
Active3 hr before
Viewed126 times

9 Answers

navbar
90%

Connect and share knowledge within a single location that is structured and easy to search.,I am building a react app and have a bootstrap nabavr that is sticky top. I have set the body to be height: 100% and when I do this the navbar no longer sticks. I cannot use vh for one of my pages as it messes up the content on mobile so I would like to stick to percentages. Is there a way to do this? I have included the code to make the body 100%., If I have data that appears normally distributed, but it contains a lot of zeros, are there issues with assuming a normal distribution?

HTML

<div id="root">
   <nav>
      <div>item</div>
      <div>item</div>
      <!-- ... -->
      <div>item</div>
      <div>item</div>
   </nav>
   <main>
      <!-- ... -->
   </main>
</div>
load more v
88%

Both of the last two methods (intersection observer/scroll listener) can cause the page to momentary jump when the transition happens, due to the removal/addition of the navbar from the normal content flow.,A more modern and performant alternative is to use an intersection observer instead of a scroll listener. First, you add a zero-height div below the navbar, and you give it a .spot class.,In the past, the easier way to achieve this was to give the element a position: fixed and place it at the top-left of the screen. For example:

.navbar {
   position: fixed;
   width: 100 % ;
   top: 0;
   left: 0;
}
Copy
load more v
72%

This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser's viewport.

Pretag
 Pretag team - issue, fix, solve, resolve
65%

Earlier, we gave our HTML element a class attribute of fixed-nav-bar so that we can apply the above style rule to it.,The last three properties (width, height, and background-color) are variable; change their values according to your needs.,Setting the top, left, and right properties to 0 avoids unintended margins/padding at the top and the sides of the fixed navigation bar.

The markup required is very minimal, just a block-level element that will hold the contents of the fixed navigation bar.

<nav class="fixed-nav-bar">
   <!-- Fixed navigation bar content -->
</nav>
load more v
75%

Let’s dive into the anatomy of this component. In the demo, I’ve removed the decorative properties below to focus on the layout styles:,Then I remembered that the height of the sticky component is dynamic.,If you’re curious about how I got the two containers to stack for smaller viewports without a media query, check out The Flexbox Holy Albatross trick.

I added align-self: start to the sidebar so its height wouldn’t stretch with the main article (stretch  is the default value). This gave my positioning properties the ability to cast their magic:

.sidebar {
   --offset: var (--space);
   /* ... */
   position: sticky;
   top: var (--offset);
}
load more v
40%

To make things more clear, erase navbar-absolute class and set position-relative for the navbar and it should work as expected. I will make a video if this explanation doesn't make things clear.,Then you have to change the position of the navbar. By setting the class .fixed-top, it gets position: fixed; so please erase class fixed-top and navbar-absolute. You can also get rid of the margin-top property of the content.,You have to set this class .navbar-absolute for your navbar and it will look like this:

<nav class="navbar navbar-expand-sm fixed-top navbar-light bg-white ">
   <div class="container-fluid">
      <div class="nav-tabs-navigation">
         <div class="nav-tabs-wrapper">
            <ul class="nav nav-pills nav-pills-danger nav-pills-icons justify-content-center" data-tabs="tabs" role="tablist" style="margin-right:20px" ;>
               (...)
load more v
22%

There are many ways to make a fixed navbar stay inside a parent's div container. We'll go over the most straightforward one here.,By adding rules targeting .container and nav.navbar, your navbar is now the same width as the parent's container:,Imagine you have the following code, modified slightly from the Bootstrap docs:

Imagine you have the following code, modified slightly from the Bootstrap docs:

<div class="container">
   <nav class="navbar navbar-fixed-top navbar-inverse bg-inverse">
      <button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
      </button>
      <div class="collapse navbar-toggleable-md" id="navbarResponsive">
         <a class="navbar-brand" href="#">
            <img src="" width="30" height="30" class="d-inline-block align-top" alt="">Navbar
         </a>
         <ul class="nav navbar-nav float-md-right">
            <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">
               <a class="nav-link" href="#">Link</a>
            </li>
         </ul>
      </div>
   </nav>
   <div class="next"></div>
   hello
</div>
load more v
60%

Fixed top navigation better allows your users to navigate your site as they go through its content. However, fully fixed navigations can often take up precious real estate as a user scrolls down a page. The solution? Have fixed navigation that only shows as a user scrolls back up.,Non-fixed navigation bars help users focus on content, but when it disappears as a user scrolls, navigation becomes cumbersome -- especially on pages with lengthy content. It also forces your audience to spend time scrolling back up to the top of the page to access the navigation menu again. ,One important thing to pay attention to is the classname used for the nav tag. We used the classname .navbar and we will need to use the same classname in our JQuery code later. It will make the navigation bar hide and appear based on scrolling behavior.

Pretag
 Pretag team - issue, fix, solve, resolve
48%

Pretag
 Pretag team - issue, fix, solve, resolve