Position sticky not working after wrapping inside header tag

HTML-CSS
1

Hello,

I’m trying to add the header tag since is semantically better, but afterwards the sticky section no longer works; doesn’t stick to the top after scrolling.

Current codepen: https://codepen.io/Snippet/pen/azNLvEa

No sure how to fix it without causing other issues.

2

have you checked if this code works in a different environment?

3

Well yes, I tried in localhost with my website code and afterwards created the codepen to make sure it wasn’t a problem specific to my setup…

4

main is not parent of header, so sticky is not engaged. Give the 2000px height to body in your css stylesheet instead

5

Thanks, updated the codepen accordingly, gave to body 2000px and main 1000px, not working though yet im afraid

6

weird, I had tried it before suggesting and it was working, can’t make it work again tho

7

ohhh :confused: weird thing is if i give header tag say 1000px it works but affecting the overal layout…

8

maybe it’s sticky inside its parent, try to remove position: relative from the header, have the body be with a big height

9

done, I was checking the overflow but all parent and sibling elemnts have vissible it seems…

pd: also maybe make a fork so that if you got it it again , it doesnt go away?

10

Ok seems like i made it with inset-inline-start and inset-block-start, if you find an even cleaner or better way (im not sure how responsive is this) let me know :wink:

Same link: https://codepen.io/Snippet/pen/azNLvEa

Update: it also works with

header {
top: -48px;
}

but I wish to use the “MENU” height instead wich is not variable as the rest of the header