Bootstrap navbar hide content on #link

Question

I have a problem with the navbar-fixed-top item. It hides content form the container.

This is a common problem solved by adding the following css code :

body { padding-top: 70px; }

Now, when I load my page, the container is not hidden by the navbar anymore. The problem is when I want to go to a specific item in the page with a href=#item. In this case, the item is always hidden by the navbar.

I have created a simple code on Codeply which shows this problem. In this example, when I click on "Got to test3", the item <h2 class="font-weight-light">TEST3</h2> is hidden by the navbar.

Here is the code below :

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
HELLO NAVBAR
</nav>
<div class="container py-2">
    <div class="row">
        <div class="col">
            <div class="sidebar-sticky" id="menu">
                <ul class="nav flex-column">
                    <li class="nav-item">
                        <a href="#test">Go to test1</a>
                    </li>
                    <li class="nav-item">
                        <a href="#test2">Go to test2</a>
                    </li>
                    <li class="nav-item">
                        <a href="#test3">Go to test3</a>
                    </li>
                    <li class="nav-item">
                        <a href="#test4">Go to test4</a>
                    </li>
                </ul>
          </div>
        </div>
        <div class="col">
            <div id="test">
                <h2 class="font-weight-light">TEST1</h2>
                <p>
                    This is a Bootstrap starter example snippet.
                </p>
                <br/><br/><br/><br/><br/>
            </div>
            <div id="test2">
                <h2 class="font-weight-light">TEST2</h2>
                <p>
                    This is a Bootstrap starter example snippet.
                </p>
                <br/><br/><br/><br/><br/>
            </div>
            <div id="test3">
                <h2 class="font-weight-light">TEST3</h2>
                <p>
                    This is a Bootstrap starter example snippet.
                </p>
                <br/><br/><br/><br/><br/>
            </div>
            <div id="test4">
                <h2 class="font-weight-light">TEST4</h2>
                <p>
                    This is a Bootstrap starter example snippet.
                </p>
                <br/><br/><br/><br/><br/>
            </div>
        </div>
    </div>
</div>

Hi! Which items do you want to be 'unhidden': the ones in the right `col`, and/or the ones in the left `col` (i.e. the sticky sidebar)? — m1ck, Apr 22 '20 at 08:16
@m1ck I have edited my question. If you click on "Go to test3" in the example, you'll see that the text "test3" is hidden — grorel, Apr 22 '20 at 08:21
Does this answer your question? [Fixed page header overlaps in-page anchors](https://stackoverflow.com/questions/4086107/fixed-page-header-overlaps-in-page-anchors) — Daniel Sixl, Apr 22 '20 at 08:22

score 0 · Answer 1 · answered Apr 22 '20 at 08:45

0

Here's the solution

 body { 
     padding-top: 70px; 

 }

 #test{

     padding-top:90px;



 }

 #test2{
      padding-top:90px;

 }


  #test3{
      padding-top:90px;

 }


  #test4{
      padding-top:90px;

 }

answered Apr 22 '20 at 08:45

Rishab Tyagi

866
1
6
12

score 0 · Answer 2 · answered Apr 22 '20 at 08:45

For the current case, you could add the padding to the div elements which have a h2 following them (such as "Test3"). Adding div h2 { padding-top: 70px; } does that for your current structure. However, in order to not depend on the h2 following a div as you further develop your project, you could also create an own class to which the padding-top-rule applies, and add it to those elements for which it is needed. Hope that helps.

score 0 · Answer 3 · answered Apr 22 '20 at 08:58

From the question Fixed page header overlaps in-page anchors, the solution is not the accepted answer but is in the answers. So I'll repeat it here.

I have add this class in the css file :

.hreflink::before {
  content: "";
  display: block;
  height: 70px; /* fixed header height*/
  margin: -70px 0 0; /* negative fixed header height */
}

and then I have define every element I want to go to with this class, for example :

<div id="test3" class="hreflink">

Bootstrap navbar hide content on #link

3 Answers3