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