How to set a margin between header and logo list in mobile version?

[OLIV1]

Previously I have a problem with the margin in a desktop version and manager to fixed it thanks to the community

Now I have a problem with the overlap logo list and header. Anyone can advice me please

[juanvisbal]

Hi, can you send a link to preview your theme? Thanks.

[OLIV1]

Hi juan

Thanks you

The theme is empire 9.1.1

www.oscarliving.id

[juanvisbal]

Thanks. I suggest replacing this custom code:

div#shopify-section-template--16970166567161__845962e2-72ee-42cd-ab5b-4ae9ad6585df {
    margin-top: -40px;
}

With the following:

#shopify-section-template--16970166567161__845962e2-72ee-42cd-ab5b-4ae9ad6585df .home-section--content {
    margin-top: 0;
}

You could change the 0 to a negative px value if you want the logos closer to the header, though I suggest not going below -15px.

Let me know if works or you have any questions.

[OLIV1]

Hi juan

Thank you for getting back to me. is there any spesific Location I need to put this Code on ??

[OLIV1]

Hi everyone,

Can you guys help me Out with this ?

[juanvisbal]

There are a few ways you can do this:

First, using the Theme Editor:

1. Click Customize to the right of your theme to open it.

2. Go to Theme settings and open the Custom CSS section. It should look something like this:

   

3. Paste the code.

4. Click Save.

Another way would be using the Code editor, which seems to be how the previous custom code was added:

1. Click the overflow menu (…) to the right of your theme then Edit code.

2. Open the theme.liquid file on the left sidebar and scroll to the bottom of the file.

3. Find the original custom code and replace it with the new one. It should look similar to this:

   

4. Click Save.

Let me know if it works or if there’s anything else I can help with.

[BSS-Commerce]

Hi @OLIV1 ,

Find the following css code that you added earlier in the theme.liquid file:

div#shopify-section-template--16970166567161__845962e2-72ee-42cd-ab5b-4ae9ad6585df {
    margin-top: -40px;
}

And change them to:

div#shopify-section-template--16970166567161__845962e2-72ee-42cd-ab5b-4ae9ad6585df {
    margin-top: 0px !important;
}

Hope the above suggestions can help you @OLIV1 !

[OLIV1]

Hi Juan Thank you for Your Reply

I Tried The first way but it did not work.

However I Tried second way and It works

Thank you Juan

[OLIV1]

Hi Juan

I saw there is something wierd after puting the html in

I saw there is like a code appear at the bottom of the mobile version

[juanvisbal]

This looks like additional css that it not wrapped between tags.

You can open the Code editor again and try to find that code in the theme.liquid file, and move it right before the tag of the custom code you added earlier. Something like this:

[OLIV1]

I tried to Fix it but unfortunately the message is getting longer

I think I did some mistaken ???

[juanvisbal]

You need to replace the in line 601 with – notice no forward slash character – and then remove the additional in between, in lines 605, 609, 613.