Menu and header covered by section.

Store Design
, ,
1

Below is the code i was helped with recently to help reduce the space between the 2 sections.

“@media screen and (max-width: 749px) {.section-template–23842860335446__image_with_text_RiKa3E-padding {padding-top: 0px; position: relative; z-index: 9999; top: -80px;}”

Now on mobile the menu seems to get covered by this section, as well and the header. examples bellow.

Any help?

MrBamboo_0-1740058142823.png
MrBamboo_0-1740058142823.png535×751 92.6 KB

2

Hi @MrBamboo

Please edit the code, as it appears to be exaggerated.

from this:

Made4uoRibe_0-1740058794354.png
Made4uoRibe_0-1740058794354.png508×201 5.58 KB

To this:

Made4uoRibe_1-1740058826475.png
Made4uoRibe_1-1740058826475.png492×202 5.45 KB

Change the z-index to 1 only.

And Save.

Result:

Made4uoRibe_2-1740058915592.png
Made4uoRibe_2-1740058915592.png648×780 24.6 KB

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

3

Hi @MrBamboo

You need to change the z-index value here to a smaller number
You can try it with a value of 1

DaisyVo_0-1740059793362.png
DaisyVo_0-1740059793362.png1721×503 47.2 KB

4

thank you!

5

It looks like the z-index in your code is causing the section to overlap with the menu and header. You can try adjusting it so that the header stays on top.

Fix: Adjust z-index and position

Modify your existing code to ensure the header stays above the section:

@media screen and (max-width: 749px) {
   .section-template--23842860335446__image_with_text_RiKa3E-padding {
       padding-top: 0px;
       position: relative;
       z-index: 1; /* Lower z-index to keep it below the header */
       top: -80px;
   }

   .header, .menu {
       position: relative;
       z-index: 10000; /* Ensure the menu and header stay on top */
   }
}

Why This Works:- The section’s z-index is set lower (z-index: 1) so it won’t overlap the header.

  • The .header and .menu now have a higher z-index (10000), ensuring they always appear on top.

Need an Easier Fix? Try EasyEdits

I’m the developer of EasyEdits—a Shopify app that helps you tweak your store’s design without touching code. It’s free to try, and you can keep the changes even if you don’t subscribe!