Bootstrap fixed navbar blocking content link to on the page

Question

I'm using bootstrap 4, and I have a navbar at the top of the screen, fixed-top class, and it works completely fine, except when I link to something on the page.

So if I have an element that I target away down the page in one of the navbar links, using href="#introduction", the page will jump to that section, but the top of the targeted element will be cut off by the navbar. This only seems to happen when I target the element from a dropdown item. I've tried with a normal navbar link and didn't experience this behaviour.

See this fiddle to see what I mean - if you click on the dropdown button, then click "Introduction", you'll see how it's being cut off (cuts off the title of the jumbotron):

<nav class="navbar navbar-expand-md navbar-dark navbar-default sticky-top bg-dark">
    <a class="navbar-brand" href="#">Test</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <ul class="navbar-nav">
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Test</a>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#introduction">Introduction</a></li>
                    <li><a class="dropdown-item" href="#">Another action</a></li>
                    <li><a class="dropdown-item" href="#">Something else here</a></li>
                    <li><hr class="dropdown-divider"></li>
                    <li><a class="dropdown-item" href="#">Separated link</a></li>
                </ul>
            </li>
        </ul>
    </div>
</nav>

<main role="main" class="container-fluid">
    <div class="row">
        <div class="col-md-1">
        </div>
        <div class="col-md-10">
            <p style="margin-bottom:1300px">
                Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. Phasellus eu sem sapien, sed vestibulum velit. Nam purus nibh, lacinia non faucibus et, pharetra in dolor. Sed iaculis posuere diam ut cursus. <em>Morbi commodo sodales nisi id sodales. Proin consectetur, nisi id commodo imperdiet, metus nunc consequat lectus, id bibendum diam velit et dui.</em> Proin massa magna, vulputate nec bibendum nec, posuere nec lacus. <small>Aliquam mi erat, aliquam vel luctus eu, pharetra quis elit. Nulla euismod ultrices massa, et feugiat ipsum consequat eu.</small>
            </p>
            <div class="jumbotron jumbostyle" id="introduction">
                <h2>
                    Hello, world!
                </h2>
                <p>
                    This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.
                </p>
                <p>
                    <a class="btn btn-primary btn-large" href="#">Learn more</a>
                </p>
            </div>
            <p style="margin-bottom:1300px">
                Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. Phasellus eu sem sapien, sed vestibulum velit. Nam purus nibh, lacinia non faucibus et, pharetra in dolor. Sed iaculis posuere diam ut cursus. <em>Morbi commodo sodales nisi id sodales. Proin consectetur, nisi id commodo imperdiet, metus nunc consequat lectus, id bibendum diam velit et dui.</em> Proin massa magna, vulputate nec bibendum nec, posuere nec lacus. <small>Aliquam mi erat, aliquam vel luctus eu, pharetra quis elit. Nulla euismod ultrices massa, et feugiat ipsum consequat eu.</small>
            </p>
        </div>
        <div class="col-md-1">
        </div>
    </div>
</main>

Does anyone have any ideas how to solve this?

score 0 · Answer 1 · answered Feb 05 '21 at 14:31

0

You can solve this issue by adding 3 or 4 <br> after

<div class="jumbotron jumbostyle" id="introduction">

This can solve the problem for now.

For the best practices you can check for each class style like jumbostyle to see what exactly casing this issue.

But you can just add 3 or 4 <br> and it will work fine.

Check this : Example

answered Feb 05 '21 at 14:31

Appreciate the feedback. But there is a problem with this - I would have to add
to every element I want to target. And if I have multiple elements, one after another, would I not end up with those
gaps between them? – ailinmcc666 Feb 05 '21 at 14:34

score 0 · Answer 2 · answered Feb 05 '21 at 14:40

0

I assume you have control over the content displayed on the page. In that case you can give the content div with the target id #introduction a padding-top with the height of your navbar (about 100px).

<div class="jumbotron jumbostyle" id="introduction" style="padding-top:100px">

To make it even better, you could consider creating a custom class for this styles or using the bootstrap spacing utilities. Please do not add this styles to the #introduction tag!

answered Feb 05 '21 at 14:40

Dirk Jan

2,355
3
20
38

The problem with this is what if I have multiple elements or sections on my page, one after another, that I want to target in this way? Then I'll have 100px gaps all over the place. – ailinmcc666 Feb 05 '21 at 14:42
@ailinmcc666 you can create one common class with `padding-top:100px` style and add it to every elements. – Prakash Rajotiya Feb 05 '21 at 14:45
Yes, but then I'll have 100px gaps between all those elements, which is not desirable. – ailinmcc666 Feb 05 '21 at 14:46
I see what you mean... Maybe this post will help you: https://stackoverflow.com/a/13184714/4112883 ? – Dirk Jan Feb 05 '21 at 15:12

score 0 · Accepted Answer · answered Feb 05 '21 at 15:00

Found the answer:

Instead of sticky-top, I used fixed-top, then added

body {
    padding-top: 70px
}

to the CSS and

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

to the script.

See here: https://jsfiddle.net/ao3b0m95/

Edit: I don't think I need the CSS, just the JS will do the job.

Bootstrap fixed navbar blocking content link to on the page

3 Answers3