Fixed Navbar Overlapping content

1

Hi you all!
I am building my portfolio page but I have a problem. When I click on a navbar link, it scrolls down and overlaps the title of each section. I tried the following workaround

`$(document).ready(function(){
    $('a[href^="#"]').click(function(e) {
        e.preventDefault();
        var target = this.hash, $target = $(target);
        $('html, body').stop().animate({
            'scrollTop': $target.offset().top-80
        }, 300, 'swing', function() {
            window.location.hash = target;
        });
    });
});`

This works but it is not okay for me, since when I use the navigation bar, active section is not showing properly.

Does anyone know a different solution in order to solve my problem?

You can see my code here

Thank you in advance

2

That workaround doesn’t seem to work for my browser (Safari latest), but I was able to correct the overlap with a line of CSS.

section h1 {
    margin-top: 60px
}
3

Hi, I tried a similar solution before. The thing is that it generates a lot of empty space above the title and I don’t like it (I am using my phone browser so maybe it looks different on desktop, my apologies if that’s the case) Is there any other solution?

Thank you so much for your time and help :slight_smile:

4

Hi. Try this quick hack:

  1. Create and empty <div> with the id for reference. Place it at the top of the section.
  2. Set its CSS to position: relative; top: -50px; (or whatever’s the height of your nav bar)
2 Likes
5

Certainly, but they’re all hacks. Here’s another JavaScript way:

window.addEventListener("hashchange", function() { scrollBy(0, -50) });

But this introduces another bug, whereby the user can click the same nav link again and it moves the viewport to overlap the title again.

This may also help you.

6

Hi @CrisBarreiro, I have solved your question here. Please take a look.
https://www.codeforx.com/questions/how-to-add-offset-to-bootstrap-scrollspy-for-nav-bar-links

7

In fact, that solved my problem, thank you so much for your time and help.

8

@CrisBarreiro, don’t mention it. If you don’t mind, would be great if you could reply on https://www.codeforx.com/questions/how-to-add-offset-to-bootstrap-scrollspy-for-nav-bar-links saying that it has solved your problem. Also, feel free to ask us questions on www.codeforx.com if you ever get stuck. We try to respond as soon as possible.

9

Hi!

It is because the na bar is fixed.

Try using scroll-padding-top in your html or body element:
https://css-tricks.com/fixed-headers-on-page-links-and-overlapping-content-oh-my/

I hope this help
Cheers