Howdy. I’m working on my Product Landing Page and I have an issue where the Navbar obscures part of the page. I found a fix on the Interweb but I can’t figure out why it works.
Can someone please explain why this keeps the top of my page from being covered up by the Navbar and is there a better way of fixing this issue just using HTML and CSS?
content: " ";
Thanks for your help!
I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (
</>) to add backticks around text.
See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).
I had the problem you are describing and I used the following in my CSS:
scroll-padding-top: 4.75rem; /*This scrolls to below navbar at current height*/
I think the
scroll-padding-top property needs to be under
html. You just need to change the value to be the height of your navbar.
Hope that helps.
If I get it right, the code does:
* Select every thing;
[id] Selects all
::before Insert something before the selected content;
So then: You are inserting thease atributes before all
ids, and the
content: " " is very comom to insert when you are working with Pseudo-elements.
I think only
*::before would be enought.
But i am stil curious about it , can you please send the code for us to analyze it?
CSS Selector Reference
Thanks for your help. So far this is working pretty good.
Thanks for the help and information. Here’s the codepen link for the code. It’s not finished yet, I was stuck on this issue for awhile.
I simply deleted that the code from your page and I saw no difference.
I think your project is going through the right way, including your nav bar.
I have some comments about your code, but I will not make them now, I will wait for the final version of your project
For now, just a tip:
CSS scroll-behavior Property
When you finish, if you want, let me know.
That selector is selecting your logo div as well.
For what you are trying to achieve, you should be able to just give the section element some top padding and negative top margin. That should make the links land correctly.
Edit: The scroll-padding-top property mentioned would work as well, just be aware of the browser compatibility.
Thanks for the help, I really appreciate it.
Thanks for the help and information, I’ve been stuck on this one issue for over 2 weeks. I probably should have asked for help sooner.