Scrolling nav position problems because fixed menu

Hi,

I hope all of u can fix my problem, it’s giving me crazy.

I have a scrolling nav website (ignore the scrollbars on the width, im fixing it for mobile devices).

So, when you click any section of the menu, the #id redirects to the section, scrolling vertically. The problem is that the first time I click the section on the menu to redirect it, it redirect a bit down, and if I click again, it’s redirect well.

I think that is because conflict’s with the menu “fixed” property, that “eat’s” height and when i click again the redirect uses the correct height.

The website is: h t t p s lagaleramagazine. es/ rucab/ index.html (Try it on the desktop/mobile version, click one time on any section of the menu, and next click again, you will see it redirect’s a bit down/up depending of the first/second click u did.

Thanks a lot!

Your navbar is fixed, when you click on a link in the navbar it take you to the top of the browser but guess what? you have a fixed navbar there so it covers part of the section you’re going to. However, if you add some padding to the top of that section to account for the navbar, you’ll see everything you expect to see.
If you use google you’ll see a lot better, but essentially the same, explanation.

isn’t there a way to make the text actually start below the navbar without adding a br? I can’t remember what it was, I thought it was position relative but it isn’t…

Hi,

I knew about that, so i added this class (sticky-fix)to the arrow-down element that is just below the menu to add the trick:

$(window).bind('scroll', function () {
    if ($(window).scrollTop() > 850) {
        $('#navbar').addClass('sticky');
        $('.arrow-down').addClass('sticky-fix');
    } else {
        $('#navbar').removeClass('sticky');
        $('.arrow-down').removeClass('sticky-fix');
    }
});

That has:

.sticky-fix {
margin-top: 60px;
}

But the problem is that like i said, if u use the menu before u scroll anything, it goes to a different position comparing if u use menu after scroll, so i can’t fix with that.

Thanks!

example please, and what language?