Question about Landing Page Navbar covering up part of page

Code Feedback
1

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?

*[id]:before { 
  display: block; 
  content: " "; 
  margin-top: -70px; 
  height: 85px; 
  visibility: hidden;

Thanks for your help!

2

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.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

3

Hey

I had the problem you are describing and I used the following in my CSS:

html {
  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.

4

Hi @zebco_king!

If I get it right, the code does:

  1. * Select every thing;

  2. [id] Selects all ids;

  3. ::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 :grin:, can you please send the code for us to analyze it?

References:
CSS Selector Reference
CSS Pseudo-elements

5

Thanks for your help. So far this is working pretty good.

Thanks again.

1 Like
6

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.

7

Hey @zebco_king!

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 :grin:

For now, just a tip:
CSS scroll-behavior Property

When you finish, if you want, let me know.

Good luck! :facepunch: :facepunch:

8

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.

section {
  padding-top: 95px;
  margin-top: -95px;
}

Edit: The scroll-padding-top property mentioned would work as well, just be aware of the browser compatibility.

9

Thanks for the help, I really appreciate it.

10

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.

Thanks again.