How to move the header to the top on mobile device?

Shopify Discussion
1

IMG_2655.jpeg
IMG_2655.jpeg1284×1138 50.9 KB

As you can see in the photo, my header is too low on a mobile device. What code can I use to fix this?

1 Like
2

Hey @Muselabel

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

3

You can change the CSS of the header container. You would either need to amend the margin or the padding.

4

Hi @Muselabel

Would you mind to share your store URL? Thanks!

5

Hi @Muselabel

Step 1: Go to Admin → Online store → Theme > Edit code

Step 2: Search for the file base.css and add this code snippet to the end of the file

@media screen and(max-width: 750px) {
    .header.header--top-center.header--mobile-center.drawer-menu {
        position: absolute;
        top: -54px;
    }
    #MainContent.content-for-layout {
        margin-top: -54px;
    }
}

@media screen and(max-width: 750px) indicates that the code will only apply on mobile

You can replace the number -54 with a smaller number to move the content further up to the top.

If it’s helpful, please like and mark it as a solution, thank you

6

Hi @Muselabel

Please crop the top and bottom space of the logo, and upload it again to solve it.

Screenshot 2024-06-24 at 15.26.59.png
Screenshot 2024-06-24 at 15.26.59.png1500×1003 243 KB

Best regards,

Dan from Ryviu

7

Hello,

thank you it worked!

8

do you also know how to put text banner on the video with action button?