Build Product Landing Page - nav bar hiding other elements

When I click on the links in nav-bar, I am able to scroll directly to the relevant spot in the page but since it brings that spot to the top of the screen, it ends up getting obscured by nav-bar.

I read somewhere that the way to overcome this was to set margin-top to the same height as nav-bar. So I did that for the element with ID, “main”. To no avail.

My codepen: https://codepen.io/sabahatiqbal/pen/EpPvZb

Help appreciated!

set your margin top to the elment your nav is going to.

1 Like

Place an empty <span id="#google"></span> on top of the id element and give it the anchor id you need as i mentioned for google.

Now for the span

#google {
 display: block; //since span is a natural inline element 
height: 92px; // 92 is the Height of navbar
margin-top: -92px; // same navbar height
visibility: hidden;
}

Since the span takes the id="#google" you have to replace the anchor element with a class.

Make sure you use class to style the elements since they are reusable, for eg: you can give a class as .social-link to both google and gmail link since they both have the same styling, by doing this you can make the code lesser.

1 Like