The navigational bar doesn't behave properly

JavaScript
,
1

On this website the main navegation menu bar needs to be fixed on the top of the screen when scrolling. And it does.
But after reviewing the website my client is complaining that on the first scroll the bar sort of stays in the middle of the screen and only on the 2dn scroll it goes to the top.
Any way to fixing this ?

  1. On this screen menu bar can be seen below the logo and above the slider

    800×559 87.8 KB

  2. On the 1st scroll the slider comes up and the menu bar changes its background to black but stays where it was. This is what my client is complaining about

    800×533 127 KB

  3. On the 2nd scroll the menu bar stays on the top which is fine

    800×559 132 KB

2

Hi,
I believe your having a CSS problem with your positioning.

In your stylesheet.min.css on line 265 you will find this ruleset.
It’s line 265 when it is un-minified, or do a search for .navbar-default.scrolled

.navbar-default.scrolled {
 background-color:#000 !important;
 left:0;
 right:0;
 top: 0; /*added this*/
 position:fixed;
 margin-left:auto;
 margin-right:auto;
 z-index:99999999;
}

You will see that I added top:0; to the rules. That will place it to the top of the viewport on the first scroll.

The problem is that without top:0; the nav bar was positioned at the last point it was in the page flow, where it was located when it was position:static

The second scroll you mentioned took it to the top of the viewport and then it stayed there.

2 Likes
3

Thank you Ray, indeed it did the trick !

1 Like
4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.