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”:
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.
thank you!
I would actually like to stick to original design
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.
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.
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.