Hi everyone! I am working on the Product Landing page project. I set the nav-bar to a fixed position but when I click on a link, the content of the page goes behind the nav-bar and so it’s not very practical. I tried adding margin and padding to the parts of the text that display under the nav-bar, but it doesn’t change anything. Anyone has an idea of how to get around this?
Here’s a link to the codepen: https://codepen.io/aimablue/pen/GYNYZv
You will need to put positive padding on top of each of those elements equal to the height of your navbar. Then you will put a negative margin top also equal to the height of your navbar. The combined content will also need the positive padding on top but not the negative margin
Thanks. It works for the first 2, but not the third…
I’m not sure why that isn’t working for you.
I wrapped each main section of your page in a div, made each the target of a nav-link and it worked for me. It is a lot easier to implement if each of your targets are similar ( divs or sections, etc). Ideally each major part of your page would have a div or section wrapped around it anyways.
Here is a very simplified example that might be helpful. If you start simple you can know that all the parts work. Then as you add content it will be obvious which which was the breaking change.
You might also want to seek out an online tutorial on fixed headers.