Header name is cut off at top by tape and menu bar. How can I fix this?

Store Design
1

There is only an issue on mobile and it happens on every page. See screenshots. “Health & wellness” is covered, and “shower fizzies”. Also, how can i make the top font all on one line?

Image from iOS (2).png
Image from iOS (2).png1242×2688 256 KB

Image from iOS.png
Image from iOS.png1242×2688 203 KB

website is lakinaturals.com

2

The simplest way is probably just adding two media queries, this should work assuming you arent going to change that announcement message. Just put this at the end of your theme.scss.liquid file in your assets folder:

@media(max-width: 1024px){
#MainContent {
    padding-top: 120px;
}
}
@media(max-width: 410px){
#MainContent {
    padding-top: 143px;
}
}

Ideally you would use javascript when the announcement bar loads to add padding to the main content to push it down, but I can see your announcement bar is already loading with javascript so I can’t compute the height of your header right when the page loads. This solution should be pretty adequate though.

3

Thank you so much! This worked!

Do you also have a solution for making the text of the tape/announcement bar all on one line?

4

I think the best way is removing a little padding and dropping the font size. Replace the old media query at 410px I gave you with this one, I upped the max-width to 415px because there was some overlap on where the announcement broke to a 2nd line and where the media query kicked in:

@media(max-width: 415px){
#MainContent {
    padding-top: 143px;
}
header p {
    font-size:10px!important
}
#shopify-section-header .px-35 {
    padding: 0!important;
}
}