What Does Navbar-Static-Top Do in Bootstrap 3

What does navbar-static-top do in Bootstrap 3?

navbar-static-top removes the left,right and top border created by navbar-default so that it looks better at the top of the page, whereas you might want to use just navbar-default elsewhere on the page...

navbar-static-top: http://bootply.com/129342

On the other hand, navbar-fixed-top uses position:fixed. If there is content on the page that extends below the viewport (as there is on most pages) the navbar-fixed-top will remain stuck to the top, whereas the navbar-static-top will scroll away. Since the navbar-fixed-top is fixed, it requires the body to have padding-top so that it doesn't overlay page content...

navbar-fixed-top: http://bootply.com/129345

As you can see when you scroll down in each example the top navbar responds differently.

Bootstrap navbar fixed-top

Here is what I could come up with. It dynamically changes the nav bar to fixed using jQuery. You can use the console.log to test when to switch to a fixed nav menu. I will post some of the code here, but I recommend looking at my code pen here.

$(function() {
  $(window).scroll(function() {

    //use this number to determine when to switch to fixed menu
    console.log($(window).scrollTop())

    if ($(window).scrollTop() > 55) $('#navbar').addClass('navbarFixed');

    if ($(window).scrollTop() < 56) $('#navbar').removeClass('navbarFixed');

  });
});
.banner {
  height: 50px;
  width: 100%;
  background-color: red;
}

#navbar {
  border: 0;
  background-color: #4080ff;
  border-radius: 0px;
  margin-bottom: 0;
  height: 30px;
}

.navbarFixed {
  top: 0;
  position: fixed;
  width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="banner">Hello, Alec!</div>
<div id="navbar">
  <a>About</a>
  <a>Faith</a>
  <a>Sports</a>
  <a>Pups</a>
</div>

Bootstrap 3 navbar-fixed-top stay fixed in mobile view

.navbar-fixed-top keeps the navbar fixed top for all screen sizes now. This will be the default. When you take a look at navbar.less you will see no media queries are applied on this class too.

To make the navbar static after the collapse add the css shown below after the Boostrap CSS:

@media (max-width: 767px) /* @grid-float-breakpoint -1 */
{
    .navbar-fixed-top
    {
    position: relative;
    top: auto;
    }
}

Bootstrap 4.3 Make Navbar Static at Top of the Page AND Transparent

Thank you for all the ideas and input everyone, it kinda got me rethinking how I set the whole thing up.

While playing around with some elements (in the end, it always comes down to targeting the right classes), I found the solution.

screen capture of the working solution

The attribues needed to be moved as follows:

#nav_desktop > *,
#nav_desktop > div {
    background: none !important;
    position: absolute;
    top: 0 !important;
    transform: translate(0%);

which would look like this, all put together:

/*-----------------------------------------------------------------------------------------------------------------------------
 ***  Angie's CSS File   |   The Design Angels           *** --------------------------------------------------------------------------------------------------------------- Version:   0.0.1 Date:    02-02-2020
-----------------------------------------------------------------------------------------------------------------------------*/

/* 0. HTML Defaults-----------------------------------------------------------------------------------------------------------------------------*/:root {
 --da-pink: lightpink; --da-grey: rgba(5,5,5,1); --da-grey: #454545; --da-grey-grad: linear-gradient(to bottom right, #131313, #454545); --da-grey-opac: rgba(69, 69, 69, .8); --da-grey-opac: rgb(69, 69, 69);
}
html, body { background-color: black;     background: rgba(65,65,65,1);    background: -moz-linear-gradient(-45deg, rgba(65,65,65,1) 0%, rgba(5,5,5,1) 100%);    background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(65,65,65,1)), color-stop(100%, rgba(5,5,5,1)));    background: -webkit-linear-gradient(-45deg, rgba(65,65,65,1) 0%, rgba(5,5,5,1) 100%);    background: -o-linear-gradient(-45deg, rgba(65,65,65,1) 0%, rgba(5,5,5,1) 100%);    background: -ms-linear-gradient(-45deg, rgba(65,65,65,1) 0%, rgba(5,5,5,1) 100%);    background: linear-gradient(135deg, rgba(65,65,65,1) 0%, rgba(5,5,5,1) 100%);    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#414141', endColorstr='#050505', GradientType=1 ); background-repeat: no-repeat; background-attachment: fixed; margin: 0; height: 100%; overflow: auto; z-index: 10;}
html body * {
}

h1 { font-family: century-gothic, sans-serif;  font-weight: 700; font-style: normal; color: lightpink; font-size: 3vw; line-height: 4vw;}
h2 {}h3 {}h4 {}h5 {}h6 {}

p {     font-family: itc-american-typewriter, serif;    font-weight: 300;    font-style: normal;    font-size: 12.5pt;    color: #ffffff;    text-align: justify;    text-decoration: none;/*  text-indent: 50px; *//*  word-spacing: 5px *//*  white-space: pre; */    letter-spacing: 1px;/*  line-height: 1.3; *//*  padding: 50px; */    display: block;    border:0; }
p a:link {    text-decoration: none;    border-bottom: dotted;  font-family: century-gothic, sans-serif;  font-weight: 700; font-style: normal; font-size: 12.5pt; color: lightpink;}p a:visited {    text-decoration: none; font-family: century-gothic, sans-serif;  font-weight: 700; font-style: normal; font-size: 12.5pt; color: lightpink;}p a:hover {    text-decoration: none;    border-bottom: dotted; font-family: century-gothic, sans-serif;  font-weight: 700; font-style: normal; font-size: 12.5pt; color: lightpink;}p a:active {    color: lightpink; font-family: century-gothic, sans-serif;  font-weight: 700; font-style: normal; font-size: 12.5pt; color: lightpink;}  
p.error {}

a,a:link { color: white; text-decoration:none;}a:hover { color: white; text-decoration:none;}

/* 10. NAV-----------------------------------------------------------------------------------------------------------------------------*/
body > #nav_desktop {
 left: 0; right: 0;}
#nav_desktop > *,#nav_desktop > div { background: none !important; position: absolute; top: 0 !important; transform: translate(0%); /* background: rgba(0, 0, 0, .0) !important; */}

.navbar { margin-bottom: 0; padding: 0 0; z-index: 100; } 
.navbar-nav.navbar-center {    position: absolute;    left: 50%;    transform: translate(-50%);}
.nav_text { font-family: itc-american-typewriter, serif;    font-weight: 300;    font-style: normal;    font-size: 12.5pt; color: #ffffff; letter-spacing: 2px;}

 @media only screen and (max-width: 768px) {   .navbar-brand > img {  position: absolute !important;  left: 50% !important;  transform: translate(-50%) !important;  } }
ul.d-md-inline > li {  display:inline !important; }

/* 50. Header-----------------------------------------------------------------------------------------------------------------------------*/header {}

/* 60. Carousel Hero slider-----------------------------------------------------------------------------------------------------------------------------*/.carousel {    top:0;}
.hero-text { padding-top: 50px; padding-bottom: 50px; background-image: url('./logo_transp.png'); background-size: auto; background-repeat: no-repeat; background-position: center -50px;  text-shadow: 1px 1px 3px black; text-align: center; position: absolute; top: 75%; left: 50%; transform: translate(-50%, -75%);}
.carousel,.item,.active { height:100vh;}
.carousel-inner { height:100vh;} .carousel-inner img { margin: auto;}
/* 100. Content-----------------------------------------------------------------------------------------------------------------------------*/content {}

/* 200. Specialties section-----------------------------------------------------------------------------------------------------------------------------*/.specialties { height: 375px; width: 29%; display: inline-box; column-gap: 5px !important; background-color: black;  background: rgba(65,65,65,1); background: -moz-linear-gradient(-45deg, rgba(65,65,65,1) 0%, rgba(5,5,5,1) 100%); background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(65,65,65,1)), color-stop(100%, rgba(5,5,5,1))); background: -webkit-linear-gradient(-45deg, rgba(65,65,65,1) 0%, rgba(5,5,5,1) 100%); background: -o-linear-gradient(-45deg, rgba(65,65,65,1) 0%, rgba(5,5,5,1) 100%); background: -ms-linear-gradient(-45deg, rgba(65,65,65,1) 0%, rgba(5,5,5,1) 100%); background: linear-gradient(135deg, rgba(65,65,65,1) 0%, rgba(5,5,5,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#414141', endColorstr='#050505', GradientType=1 ); padding: 15px !important; margin-right: 10px; margin-left: 10px; margin-bottom:20px; }

/* 900. Footer-----------------------------------------------------------------------------------------------------------------------------*/footer {}

/* Zz. Bootstrap edit-----------------------------------------------------------------------------------------------------------------------------*/.overlay { background: black; opacity: 0.7;/* background-size: cover; */}

button {    display: inline-block;    border: 1px solid; border-color: white;    padding: 10px 10px;    margin: 0;    text-decoration: none;    background: none;    color: white;    font-family: century-gothic, sans-serif; font-weight:700; font-style: normal; font-size: 12 pt;    text-align: center;
}
button:hover,button:focus {    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));}
button:focus {    outline: 1px solid transparent;    outline-offset: -4px;}
button:active {    transform: scale(0.99);}
.clearfix::after {  content: "";  clear: both;  display: table;}
.responsive-image { max-width: 100%; height: auto;}
.center-block {    display: block;    margin-left: auto;    margin-right: auto; }

/* 10000. TEXT STYLING-----------------------------------------------------------------------------------------------------------------------------*/@media print {    p {        color: black;    }}
.tab {  text-indent: 40px;  }
<!DOCTYPE html><html><head> <title>Welcome to the Design Angels</title>  <!-- META DATA -->  <meta charset="utf-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <meta name="description" content="Welcome to theDesignAngels, we make it look glittery and shiny."/>  <meta name="keywords" content="graphic design, design, grafisch, vormgeving, dtp, geleen, limburg, nederland, francophone, franstalig, english, nederlands, vormgever, web sites, packaging, verpakking, creatief, creative, beautiful,thedesignangels, the design angels"/>
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->  <script src="files/lib/jQuery.js"></script>  <script src="files/lib/lib/popper/Popper.js"></script> <!-- BOOTSTRAP CSS -->  <script src="files/lib/bootstrap.min.js"></script>  <link rel="stylesheet" type="text/css" href="files/lib/bootstrap.min.css">
 <!-- Libraries & frameworks -->  <script src="functions.js"></script>  <link rel="stylesheet" style="text/css" href="style.css"/>  <link rel="stylesheet" href="https://xxx">    <link rel="shortcut icon" href="assets/favicon.jpg" type="image/x-icon" /></head><body>
 <!-- NAVBAR -->    <nav id="nav_desktop" class="navbar navbar-expand-md" role="navigation">   <!-- Brand -->   <div class="container-fluid">    <a class="navbar-brand" href="#"><img src="logo_menu.png"  style="width:180px;height:auto" alt="the Design Angels" data-toggle="tooltip" title="home"></a>      <!-- Collect the nav links, forms, and other content -->    <!-- Site nav -->    <ul class="nav navbar-nav navbar-center d-none d-md-inline">     <li><a href="#services">                        <span class="nav_text">SERVICES</span>      </a><span>  </span>     </li>     <li><a href="#portfolio">                        <span class="nav_text">PORTFOLIO</span>      </a><span>  </span>     </li>     <li><a href="#contact">                        <span class="nav_text">CONTACT</span>      </a><span>  </span>     </li>    </ul>       <!-- Social media -->    <ul class="nav navbar-nav ml-auto d-none d-md-inline">     <li><a href="http://facebook.com/thedesignangels" target="_blank" alt="The Design Angels on Facebook">                        <img src="social/fb_.png" onmouseover="this.src='./social/fb_mouseov.png'" onmouseout="this.src='./social/fb_.png'" style="height: 15px; margin-top: -5px;" >      </a>         </li>     <li><a href="https://www.instagram.com/thedesignangels/" target="_blank" alt="The Design Angels on Instagram">                        <img src="social/inst_.png" onmouseover="this.src='./social/inst_mouseov.png'" onmouseout="this.src='./social/inst_.png'" style="height: 15px; margin-top: -5px;" >      </a>         <li><a href="https://twitter.com/thedesignangels" target="_blank" alt="The Design Angels on Twitter">                        <img src="social/twit_.png" onmouseover="this.src='./social/twit_mouseov.png'" onmouseout="this.src='./social/twit_.png'" style="height: 15px; margin-top: -5px;" >      </a>         </li>    </ul>   </div>  </nav>

 <!-- CAROUSEL HERO -->  <div id="myCarousel " class="carousel slide" data-ride="carousel">
   <!-- Wrapper for slides -->   <div class="carousel-inner">    <div class="carousel-item active">     <img src="slider-01.jpg" class="overlay">    </div>
    <div class="carousel-item">     <img src="slider-02.jpg" class="overlay">    </div>
    <div class="carousel-item">     <img src="slider-03.jpg" class="overlay">    </div>
    <div class="carousel-item">     <img src="slider-04.jpg" class="overlay">    </div>
    <div class="carousel-item">     <img src="slider-05.jpg" class="overlay">    </div>   </div>
   <!-- Hero Text -->   <div class="hero-text container">    <h1 class="hero-cust">Looking for Character<br> and Innovation ?</h1><br> <br>     <p style="text-align: center;">The Design Angels have solutions for you,<br> on top of offering advice and custom-made designs</p><br> <br>     <a href="#contact"><button>GET IN TOUCH</button></a>   </div>  </div>  
 <!-- Introduction -->  <div class="container-fluid">   <div class="container">    <div class="row">      <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" style="padding-top:50px;">      <h1>Great design<br>      is powerful</h1>     </div>       <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 clearfix" style="padding-top:50px;">      <p class="tab">Not only does it brings personality and brand recognition to goods or services,      but it establishes a recognition and creates the <span style="color:lightpink;">feeling of trust</span> we feel for those brands we love.<br> <br> <br></p>      <p class="tab">Set yourself above the competition with professional design and packaging: <span style="color:lightpink;">great communication</span> shows the world how serious you are about business.      </p>     </div>       <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 clearfix" style="padding-top:50px;">      <img src="mockup.png" class="responsive-image" style="width:200px; height: auto; vertical-align: top; float: right;" >     </div>    </div>   </div>  </div><br>     

    <!-- Optional JavaScript -->
 <script src="script.js"> </script>
</body></html>

Bootstrap 3 - How do I make the nav bar sticky on scroll

Bootstrap 3 has a class .navbar-fixed-top that can be applied to nav element to fixed to top of page. It works with all basic navbar functionality at different screen sizes. There is an example as part of the official documentation.

<nav class="navbar navbar-default navbar-fixed-top" id="mNavbar">

If you need it to become sticky at a certain amount of px from top of screen then you you'd need to attach a scroll event handler to the page. You would then check the distance the page has been scroll then apply the fixed nav class or set styling to fix to a specific position. Something like this:

$(document).ready(function() {  var $navbar = $("#mNavbar");    AdjustHeader(); // Incase the user loads the page from halfway down (or something);  $(window).scroll(function() {      AdjustHeader();  });    function AdjustHeader(){    if ($(window).scrollTop() > 60) {      if (!$navbar.hasClass("navbar-fixed-top")) {        $navbar.addClass("navbar-fixed-top");      }    } else {      $navbar.removeClass("navbar-fixed-top");    }  }});
body{  position: relative;  display: block;  height: 1000px;  overflow-y: scroll;}
.navbar{  top: 60px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">  <nav class="navbar navbar-default" id="mNavbar">    <div class="container">      <div class="navbar-header">        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false" id="toggle">          <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" id="bs-example-navbar-collapse-1">        <ul class="nav navbar-nav">          <li><a href="#">Home</a>          </li>          <li><a href="#section2">Services</a>          </li>          <li><a href="#section3">Contact</a>          </li>        </ul>      </div>    </div>  </nav></div>

Bootstrap 3 navbar over first row

Read documentation carefully.

According to Bootstrap navbar docs:

The fixed navbar will overlay your other content, unless you add padding to the top of the body. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.

body {
  padding-top: 70px; // Your navbar height
}

Make sure to include this after the core Bootstrap CSS.


Related Topics

Position:Sticky Is Not Working

Using Nth-Child in Tables Tr Td

Two HTML Tables Side by Side, Centered on the Page

How to Use SCSS/Sass to Increase Animation-Delay for Concurrent Divs

What Is the Regex of a CSS Selector

CSS Relative + Right (Or Bottom) Almost Never Work

Why Do I Get the Error Message "Element 'Style' Cannot Be Nested Within Element 'Style'"

Css3 Animation - Smooth Infinite Cycle

CSS Issue on iPad with Table Border

How to Align Jsf Components to Center

.Less Together with Razor

Evenly Distribute Images Vertically Within Fixed-Height Space

Align Header Elements in Shiny Dashboard

Style Using Nth-Child to Keep Table's Aspect (Alternating Row Colors) Updated

Convert Px to Em in Less

Two ::After Pseudo-Elements

CSS Custom Dropdown Select That Works Across All Browsers IE7+ Ff Webkit

Canvas VS. Webgl VS. CSS 3D -> Which to Choose


Leave a reply



Submit