Overlapping and different space for Header And Announcement Bar on mobile etc. Baseline Theme

[TheAnyTony]

Hello, I have added the following code in order to prevent the header to overlap the header:

.section-x-padding { top: 40px; }

However, I still have the overlapping issue on mobile, and other screens.
My URL: www.bynamo-official.com

I also notice the spacing is different for different windows ( i have the announcement bar set to fixed for all pages).

I would be happy if someone could help me with this issue.

[BSS-Commerce]

Hi @TheAnyTony

I visited your store and noticed the problem. The header overlaps on devices other than the desktop because you have set it.

<style> .section-x-padding { top: 40px; } </style>

This top attribute cannot be applied to position: static. It works on the desktop because of the lg: relative class (helps the position on the desktop to be relative).

To solve this problem, modify your code to:

<style> .section-x-padding { top: 40px; position: relative;} </style>

Hope it helps @TheAnyTony

[TheAnyTony]

Thanks for getting back to me. I tested this, and for the header it works- But i see that some side-effects: this black stripe for example. And overlapping bread-crumb and picture on the blog. Any suggestions?