Sticky Header Code Causes Text to Move

Shapely
1

I’ve been trying to make the header for the website www.tokyoesque.com freeze in place so that it is still visible and clickable when scrolling down, but the code I have tried has shifted some text on the homepage to an undesirable position. Can anyone help me find a way to get the sticky header to work without messing up the position of other elements of the page?
The code I have tried is as so:
/Sticky header /
header#masthead {
position: fixed;
width: 100%;
z-index: 100;
}

2

Hi there

I added code and its working for me: Screenshot by Lightshot

Let me see the screenshot of the code in your CSS container

Regards

3

image
image1920×1080 182 KB

Thank you so much for your speedy response! Here’s a screenshot of the issue (as you can see, the text “Japan Market Research & Expansion” and the overlaying transparent image above it have been moved up.) In the screenshot, you can also see the CSS container.

4

Apologies to be messaging again so soon! Might you have any idea as to how I could go about fixing this? :slight_smile:

5

Hi Alex

From what I see code is not added on the website, its not rendered.
Please provide access details in DM and I will fix it for you

REgards

6

Hi! I’ve tried messaging you a couple of times, but I haven’t seen any response yet and can’t see the messages I’ve sent you. I’ll try messaging again just now - it would be great if you could respond please :slight_smile:

7

Hi there

Please check again, its fixed now:

/*Fixed header*/
header#masthead {
    position: fixed;
    z-index: 1000;
    width: 100%;
}
#page > #content {
    top: 76px;
    position: relative;
}
8

Amazing! Wonderful job and thank you so much! :slight_smile:

9

Cool :slight_smile:

Thank you too and have a nice day :slight_smile: