I have a black header on the top of the page. Now I would like to add a second transparent header that appears after the first section and then stays fixed at the top of the page for the following sections. Any suggestions on how I could implement this? If this is not possible, is there a way to make items in the header disappear/appear at a specific section? All help and creativ suggestions are appreciated. Thanks in advance!
2 Likes
Hi @lisa66188 ,
You’ll have to add a container at the top of the first section, set it as the same height and width as your first header, and copy - paste all the header elements into it. Then set it’s scroll to ’ Sticky '. Now add your second header below the first section and set it’s scroll to ’ Fixed '.
You can’t set the first header to sticky and the next header as fixed as headers (which are very much like sections) are the ‘children’ of a particular page so setting it to Sticky will keep them fixed till you reach the end of their parent element, which is the page itself.
Two headers will not work in your case because when I tried to replicate your issue, I found out that the first ‘black’ header will be visible even if overlapped by the second header since you mentioned that it is transparent.
Hope this helps!
You’re welcome!