Padding issue after clicking on navigation links

Here’s my code for Product Landing Page assignment:

When I click on “Client Testimonials” or “Our Services”, I am taken to the corresponding sections within the page. It works just fine. The problem is, after being taken to the required section, there is a white space above the section. (Scrolling up will show the issue). The problem is with the following CSS code.

:target {
position: relative;
padding-top:90px;
background-clip: padding-box;
}

In the above code, the “padding-top:90px” is causing the white space issue. However, if I don’t use the “padding-top:90px” code, the navigation won’t work as intended. The nav bar, which is fixed, will cover the initial part of whatever section I am trying to navigate to. Hope I am clear enough.

Is there a solution to this? Any help will be highly appreciated. I have tried doing some research on this online. I found one source where the above mentioned “:target” idea was used. It worked for them just fine but for me, only partly.

What whitespace are you referring to?

Hello Catalactics! Thank you for replying!

Exactly, the one you circled in red.

Ok, what you can do is create a new empty div or section and give it an id that you want to use for the navigation: ex;

<!-- Create a dummy section or div -->
<div id="testimonials-id"></div>
<div id="testimonials-section">
    <h3 id="testimonials">Testimonials from our clients</h3>
    <p id="testimonials-text">Content Here</p>
  </div>

Then link it to that div.

<li><a class="nav-link" href="#testimonials-id">Client Testimonials</a></li>
1 Like

You are a life-saver ! Thank you so much!

I used your code in HTML. In CSS, I did minor changes as follows:
:target {
position: relative;
border-top: 90px solid transparent;
margin:-90px 0 0;
background-clip: padding-box;
}

Now it works like a charm! Thanks a million. May you have a wonderful day! :slight_smile:

1 Like