CODEWITHSUNDEEP
htmlcss
marcellio
marcellio

Reputation: 32

nav bar after scroll stretch too much

I have nav bar and I'm using js to make my nav bar position fixed. After scrolling down because i adding width 100% my nav bar stretch more then it should and it goes over my layout

my script

$(window).on("scroll", function(){
 if ($(window).scrollTop()) {
  $('nav').addClass('sticky');
 } else {
  $('nav').removeClass('sticky');
 }
})

Css

.sticky {
position: fixed;
top: 0;
width: 100%;
}

link to website so you can see what is happening is click here

Upvotes: 1

Views: 395

Answers (3)

arcee123
arcee123

Reputation: 211

.sticky {
    position: fixed;
    top: 0;
    width: 100%;
}

could be your problem here. Change 100% to the actual width you want, because your object is leaving the header object with a static positioning and as so the width isn't regulated any more. This fix is quick but also dirty. Consider changes in your layout have to be applied to all divs with static width, as well as responsive features are harder to implement. Option B would be a much better solution here.

Another solution is to insert a between the page div and your objects and set the fixed width there. Sub-divs allow for aligning objects. Inside objects at 100% width will line up to the next div up in the document tree.

Upvotes: 1

AME
AME

Reputation: 375

.sticky {
position: fixed;
top: 0;
width: 100%;

}

Here you just can give the width value in pixels, what you want. Or if you wanna use it with relative values, you can make a container for it, because it will count the position from the parent element, give a fix width value to the container, and add your element to it.

Upvotes: 1

Rodrigo Brito
Rodrigo Brito

Reputation: 388

I recomend you to use the position stick property

For example: nav { position: sticky; top: 0px; }. You should use it inside a container with height defined.

Reference: https://developer.mozilla.org/pt-BR/docs/Web/CSS/position#Sticky_positioning

Upvotes: 2

Related Questions