As you can see, the main header is overlapping with itself. Is there a way I can fix this? Thanks
Topic summary
Main issue: On mobile, the main header text overlaps itself. A screenshot was provided, making the visual problem central to understanding.
Attempts made:
- CSS applied to the header (z-index: 9999; position: relative; position: sticky; top: 0; padding) to control stacking and keep the header fixed. z-index manages layer order; sticky pins the element when scrolling. Result: did not resolve the overlap.
- A mobile media query (max-width: 600px) targeting .videoBoxInfoTitle to reduce font-size to 18px and add padding. Media queries tailor styles for small screens. Result: also did not fix the issue.
Access for debugging: Store preview URL was shared with instructions to log in via password “maibla”.
Open questions/next steps:
- The user asked whether the CSS needs to be placed in a different location, suggesting a possible placement or selector mismatch.
- Further inspection of the live theme and correct selectors may be required now that access credentials are provided.
Status: Unresolved; awaiting guidance on where to place CSS or a selector-specific fix after reviewing the live site.
HI, there
Would you mind sharing your store url?
Hi @MrDunkonthem ,
To fix the overlapping header:
add css to the header section
.header-class {
z-index: 9999;
position: relative;
padding: 20px;
position: sticky;
top: 0;
}
save and refresh
Got it! If you found my suggestions helpful, please consider liking or marking it as a solution.
Your feedback is appreciated! If you have any more questions or need further assistance, just let me know.
Thanks & Regards
Akshay Bhatt
No luck.
its not working
pls try below code
@media only screen and (max-width: 600px) {
.videoBoxInfoTitle {
font-size: 18px;
padding: 10px;
}
}
Didn’t work when I pasted in the custom CSS for the header section. Do I need to put it in another section?
Click the link, then click in the top right corner “login using password” and enter “maibla” press enter