Product landing page - issue with fixed menu bar

#1

Product landing page - https://codepen.io/elenala/full/eYYaZBR

when clicking one of the menu links (in this case “DEALS”) it jumps to the “deals” section of the page BUT it puts the beginning of the section to the top of the browser’s window.
Since I have a header with position: fixed at the top, the upper part of the DEALS section is hidden behind the fixed header.
How do I do it the way it would put the needed section to the top of the (below the fixed menu bar)?
This is how it looks after clicking “DEALS”:

image
image1337×399 54.7 KB

#2

you have to add padding-top: <height of your header here>; to your section then it should look fine.

you can try adding

html {
    scroll-behavior: smooth;
}

to your css which will make scrolling a bit cooler (this wont affect safari tho)

#3

well, it actually shows it right when I open the page.
the issue that I am trying to resolve is what happens after clicking the links in menu.

If I add top padding to all sections then the page will not look as I want it to look (though I agree it will resolve the issue).

(to see what I mean just follow the link and you will see the page as designed. then click one of the red links in the menu bar and it will get ugly…

#4

I know what you mean I took a look at your page the first time but this is the best solution I could think of. I would have two different ideas which are sadly not valid for this course.

#5

would you please share the ideas?

#6

you could do a kind of tab-view like this https://www.w3schools.com/howto/howto_js_full_page_tabs.asp or seperate your topics into single pages.

The later wouldn’t work for you sincer there isn’t enough content.

#7

thank you!
I would actually like to stick to original design :slight_smile:

I think I found a solution. Working on it now.
I will make a block at the top of each section with height of the header. This block normally will be hidden (so it will not affect the existing design).
But when the section is brought to the top by clicking one of the menu links, the mentioned block will get visible and will offset the section’s content to the height of the header.

If I get it right, that can be done with the :target selector https://www.w3schools.com/cssref/sel_target.asp

#8

that souns interesting. Keep my updated!

#9

I have updated the page. https://codepen.io/elenala/full/eYYaZBR
It looks better now but still not perfect. though it displays everything well after clicking the menu links, it leaves the block visible if I scroll to the top.

image
image1387×662 57.8 KB

Tried to fix it to the top behind the menu bar (position: fixed; top: 0;) but somehow that did not work. It actually manes all the menu links non-working.

I probably can make it hidden again with JS but I would really like to find a CSS/HTML solution.

#10

I have achieved the same result without creating additional block:

section:target {
  padding-top: 6rem;
}

But still it leaves that empty space above the section if scrolling up.

positioning of the targeted section also doesn’t give the needed result:

section:target {
  position: relative;
  top: 6rem;
}
#11