Nav bar covering info

HTML-CSS
1

Tell us what’s happening:
I could resolve the top of the page by applying necessary padding but for other hyper links I seem to go slightly below the required point, how can I resolve this. Any help would be greatly appreciated.

Your code so far

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.1.1 Safari/605.1.15.

Challenge: Build a Product Landing Page

Link to the challenge:

2

One trick you can use is to set padding-top and margin-top on the element you want to scroll to. The key here is that the padding-top should be a positive value and the margin-top will be the negative of that value. For example, if I am scrolling to an h2 element:

h2 {
	padding-top: 2.5em;
	margin-top: -2.5em;
}

The actual numbers will be dependent upon the size of your top menu.

3

I tried something like this, but its giving lots of unnecessary spaces, isn’t there an option that could pinpoint where I need to go?

4

I think I’d need to see your actual page before I could answer any further. I used this method on a menu system I am working on and it works just fine. But I suppose you may be doing something different and the method I suggested above may not work out of the box on your page.

If you want to see mine in action take a look at http://bbsm.surge.sh.

5

Hello there @pabbasaiharsha :wave: ,

Can you maybe link your project here, or maybe share to us bits of your code so we can troubleshoot this further. Currently, we do not really have enough information of what you have applied and what you wanted to add. Thank you for the understanding.

Remember to Stay Safe and Happy Coding :slight_smile:

Catalactics