Issues with header in landing page

HTML-CSS
1

https://codepen.io/croy4744/pen/xxEVeej

I completed the product landing page project but there are some issues with its header which I couldn’t solved no matter what I do. Whenever I changed the position of header to “fixed”, it becomes like this(click on the link and you will see how weird it is). How can I solve this issue?
Please help. I tried everything I could. I am stuck for 4 hours but I couldn’t correct it. HELP!! SOS!!

Any other suggestions regarding responsive web desigining or web design in general is welcome too. Please help me fix header of this page. Thanks a lot in advance!!

2

Hi @croy4744!

I have edited your title of this post to remove the codepen link and replace with the current title you see now.

You will get more responses to your questions if you avoid placing links in the title of posts.

3

Thanks madam. Will keep in mind in future.

4

Can you look into the issue and suggest me a solution. Thanks!!

5

I have looked at your project and there are a few things.

Your navbar should always be at the top. So you need to set the top position in the header to 0.
top:0;

You could also drop the h1 one down which will put all of the other elements down as well.

h1{
margin-top:80px;
}
6

Thanks but that solves the problem only temporarily. When viewport size is reduced, the content gets hidden again behind header.

Why that happens?

7

It is because of the height of the header. You could increase the margin-top to 150px.

Ideally, for mobile devices you would create a hamburger menu.
If you were interested in going down that route you can read any of these articles on how to do that.

8

For this you can also change your header height to a percentage; for example height: 10%. Though I noticed that once the viewport width gets down to a certain size, the words in your navbar will disappear.

9

Hi @croy4744,

If the issue is of the section you are clicking on the menu getting hidden behind the header, ’ scroll-margin-top: ’ could help.

Try adding scroll-margin-top: 10rem; inside the sections you are jumping to…(the value 10rem could vary )

Check out this article on the same:

10

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.