'Navigation bar increase width when it sticks. Why?

Ive looked at very similar questions about this on here but all seem to have the navbar in a wrapper and I don't.

Its a similar outcome though. When my navbar stick to the top, by applying a .sticky that gives it 'postion:fixed', it increases width ever so slightly but has a noticeable affect due to text alignment.

Why is the width of the other divs smaller than the width of the navbar when it is static? Shouldn't they all be 100% of the viewport?

How can stop this happening?

Any advice appreciated!

Stu

    const navBanner = document.getElementById("navBanner");
    const sticky = navBanner.offsetTop;
    
    window.onscroll=function(){
              
      if (window.pageYOffset >= sticky) {
        navBanner.classList.add("sticky");  
      } else {
        navBanner.classList.remove("sticky");
      }
        
    };
    body{
      font-family: 'Open Sans', sans-serif;
    }
    
    .banner{
        padding-top:10px;
        padding-bottom: 10px;
        text-align: center;
    }
    
    #titleBanner{
        height: 300px; 
        padding-top:200px;
        background-color: lightgray;
        color: white;
    }
    
    #navBanner{
        height: 25px;
        background-color: lightgray;
        overflow: hidden;
        width: 100%;
    }
                
    #navBanner a{
        text-decoration: none;
        color: black;
    }
    
    #navBanner a[href="#techBanner"]{
        margin-left: 400px;
        margin-right: 400px;
    }
    
    .sticky {
      position: fixed;
      top: 0;
      background-color: darkgray !important; 
      color: white !important
    }
   
    
    #techBanner{
        height: 300px;
        background-color: lightgray;
        width: 100%;
    }
    
  
   
    h1{
      
      font-size: 500%;
      font-family: sans-serif;
    }
    
    #profBanner{
        padding: 150px;
        border: solid black 1px;
    }
    
    #profile{
        width:50%;
        margin: auto;
        text-align: justify;
    }
    
    #contactBanner{
         
        height:1000px;
        
    }
<div id="titleBanner" class="banner">    

  <h1>Lorem ipsum dolor</h1>
     
</div>
    

<div class="banner" id="navBanner">
          
        <a class="link" href="#profBanner">About me</a>
        <a class="link" href="#techBanner">Technical</a>
        <a class="link" href="#contactBanner">Contact</a>
        
</div>

<div class="banner" id="profBanner">
    
  <div id="profile">
      
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc id lobortis lorem, ac aliquet nunc. Mauris vel est viverra, malesuada metus a, vehicula quam. Vestibulum a pretium felis, eget porta massa. Proin dui augue, mollis ac blandit ut, egestas non augue. Fusce at nisl vel nulla mollis dictum. Praesent ut metus luctus, maximus velit vel, pulvinar mauris. </p>
      
  </div>
    
</div>


<div  id="techBanner">

 
</div>
    
<div  id="contactBanner">

 
</div>
javascripthtmlcsscss-position


Solution 1:[1]

You can make class sticky's width to auto with !important and make left and right to 8px (or make them to 0, if you would like full width).

.sticky {
    position: fixed;
    top: 0;
    background-color: darkgray !important;
    color: white !important;
    width: auto !important;
    left: 8px;
    right: 8px;
}


const navBanner = document.getElementById("navBanner");
    const sticky = navBanner.offsetTop;
    
    window.onscroll=function(){
              
      if (window.pageYOffset >= sticky) {
        navBanner.classList.add("sticky");  
      } else {
        navBanner.classList.remove("sticky");
      }
        
    };
body{
      font-family: 'Open Sans', sans-serif;
    }
    
    .banner{
        padding-top:10px;
        padding-bottom: 10px;
        text-align: center;
    }
    
    #titleBanner{
        height: 300px; 
        padding-top:200px;
        background-color: lightgray;
        color: white;
    }
    
    #navBanner{
        height: 25px;
        background-color: lightgray;
        overflow: hidden;
        width: 100%;
    }
                
    #navBanner a{
        text-decoration: none;
        color: black;
    }
    
    #navBanner a[href="#techBanner"]{
        margin-left: 400px;
        margin-right: 400px;
    }
    
    .sticky {
        position: fixed;
        top: 0;
        background-color: darkgray !important;
        color: white !important;
        width: auto !important;
        left: 8px;
        right: 8px;
    }
   
    
    #techBanner{
        height: 300px;
        background-color: lightgray;
        width: 100%;
    }
    
  
   
    h1{
      
      font-size: 500%;
      font-family: sans-serif;
    }
    
    #profBanner{
        padding: 150px;
        border: solid black 1px;
    }
    
    #profile{
        width:50%;
        margin: auto;
        text-align: justify;
    }
    
    #contactBanner{
         
        height:1000px;
        
    }
<div id="titleBanner" class="banner">    

  <h1>Lorem ipsum dolor</h1>
     
</div>
    

<div class="banner" id="navBanner">
          
        <a class="link" href="#profBanner">About me</a>
        <a class="link" href="#techBanner">Technical</a>
        <a class="link" href="#contactBanner">Contact</a>
        
</div>

<div class="banner" id="profBanner">
    
  <div id="profile">
      
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc id lobortis lorem, ac aliquet nunc. Mauris vel est viverra, malesuada metus a, vehicula quam. Vestibulum a pretium felis, eget porta massa. Proin dui augue, mollis ac blandit ut, egestas non augue. Fusce at nisl vel nulla mollis dictum. Praesent ut metus luctus, maximus velit vel, pulvinar mauris. </p>
      
  </div>
    
</div>


<div  id="techBanner">

 
</div>
    
<div  id="contactBanner">

 
</div>

Solution 2:[2]

With all your help I came up with a really simple solution.

I realised that the body was the container of my navbar before it .sticky was applied! How did I miss that!?!

So, I set . . .

body{ width:100%; }

Now all the divs and the navbar prior to .sticky application are 100% of viewport and so are all consistent widths.

Anyone see issues with that?

Solution 3:[3]

You can make the with of the container to use view port width(vw) instead of percentages(%). To me it worked when I calculate and reduce the width of the fixed container by 100 pixels.

.sticky {
      position: fixed;
      top: 0;
      width: calc(100% - 100px);
    }

`

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Gregor Ojstersek
Solution 2
Solution 3 Wuletaw Wonte

Related Questions