Sticky navbar disappearing after passing main section

Question

I can't seem to get my sticky navbar to be sticky all the way through to the bottom of the page, it disappears after i pass the .main div.

I've tried different z-indexes

https://jsfiddle.net/pcLohe1v/1/ <-- better example

/* navbar */

nav {
  background-color: #fff;
  z-index: 1 !important;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  box-shadow: 0px 1px 10px #999;
  transition: top .4s;
  width: 100%;
}

nav ul.navbar-nav li {
  margin-right: 30px;
}

nav li a {
  / color: #000;
  border-bottom: 2px solid #000;
  */
  /* wave effect */
  background: linear-gradient(to bottom, var(--mainColor) 0%, var(--mainColor) 100%);
  background-position: 0 100%;
  background-repeat: repeat-x;
  background-size: 3px 3px;
  color: #000;
  text-decoration: none;
  */
}

nav li a:hover {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='squiggle-link' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 20 4'%3E%3Cstyle type='text/css'%3E.squiggle{animation:shift .3s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-20px);}}%3C/style%3E%3Cpath fill='none' stroke='%23404d91' stroke-width='2' class='squiggle' d='M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3'/%3E%3C/svg%3E");
  background-position: 0 100%;
  background-size: auto 6px;
  background-repeat: repeat-x;
  text-decoration: none;
  color: #404d91;
  border-bottom-color: #fff;
}

nav button {
  border: 2px solid #000 !important;
}

nav button:focus {
  outline: none;
}

nav img {
  height: 80px;
  width: 100px;
}


/* collapse button svg change coor */

.custom-toggler.navbar-toggler {
  border-color: rgb(255, 102, 203);
}

.custom-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0,0,0, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}


/* main */

.main {
  background: url(../img/good1-min.JPG) no-repeat 50% 50%;
  display: table;
  height: calc(100% - 104px);
  height: -o-calc(100% - 104px);
  /* opera */
  height: -webkit-calc(100% - 104px);
  /* google, safari */
  height: -moz-calc(100% - 104px);
  /* firefox */
  width: 100%;
  background-size: cover;
  padding-top: 10px;
}

.main .container img {
  display: block;
  margin: auto;
  height: 400px;
  width: 500px;
  background-color: rgba(255, 255, 255, 0);
}

/* showcase1 & showcase2 */
.showcase1,
.showcase2 {
  padding-top: 100px;
  padding-bottom: 100px;
}

.showcase1 p,
.showcase2 p {
  font-size: 22px;
  color: #32383e;
}

.showcase1 h1,
.showcase2 h1 {
  font-size: 64px;
}



  
    
    
      
    
    
    
    
    
      
        
        
          Home
        
        
          Contact
        
        
          About
        
      
    
  



  
    
  



  
    
      
        
      
      
        Lorem.
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
        lorem ipsum.

I expect the navbar to be sticky all the time but its hiding after for some reason. I don't know what to do or why this is happening.

Pierre-Yves Legeay · Accepted Answer

The issue is :

html, body {
    /* set the body's height to the height of the viewport */
    height: 100%;
}

Try min-height: 100%; instead.

For example, if you set your body/html with overflow: hidden; there won't be any scroll bar. That's because everything you currently see in your fiddle beyond the height of your viewport is overflown content.

At 100% of the viewport your sticky nav has reached the end of it's container and scroll with it (as it is supposed to) !

Here is a fork of your fiddle with this CSS modified :

html, body {
    /* height: 100%; */
    min-height: 100%;
    width: 100%;
}

Sticky navbar disappearing after passing main section

Answers (2)

Related Questions