How can I customize my mobile header in the Refresh theme?

Store Design
, , ,
1

How can I make my header look the way this one does?

Screenshot 2023-11-25 122406.png
Screenshot 2023-11-25 122406.png598×222 22.2 KB

I want my logo all the way to the left in the header and the menu all the way to the right. Currently there is a lot of padding to the left of my logo and the menu is beside the logo. I also would like to add the tabs at the top. That though isn’t necessary. Thank you for helping

2

Hi @JoeUSA

Check this one.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “theme. Liquid” file. Find the tag and paste the code below before the tag.

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

3

It doesn’t work on an actual phone screen. Here’s what I see on my phone. It does look way better than it did. If it’s possible though I would like it to look like the picture you sent.

1000005291.jpg
1000005291.jpg1080×2400 217 KB

4

I check it again, but the result is change. What browser are you using? I open in chrome, incognito, mozilla the result is like this.

Made4uoRibe_0-1700942847412.png
Made4uoRibe_0-1700942847412.png552×483 36.4 KB

Made4uoRibe_1-1700942914685.png
Made4uoRibe_1-1700942914685.png837×427 36.8 KB

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

5

I have Chrome that I use on my phone. I tried DuckDuckGo and just an internet browser on my Android phone and this is what it looks like.

1000005294.jpg
1000005294.jpg1080×2400 219 KB

6

Oh, Im sorry. I already clear cache, refresh my computer. But still im seeing different result.

7

Okay well thanks for trying.

8

I just looked again and it works on every page except the home page. Do you know why that would be?

9

Can you add this code.

And save.

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

10

Can you try to paste it on the base.css file? just take out the .

It seems like you didnt paste on the theme.liquid. You paste it on the different folder.

11

That worked but the logo is huge now and it’s covering the cart button?

12

Paste the last code you gave me in the base.css file without the ?

13

Paste both codes in the base.css file?

14

Please, remove the code with the And paste this one in the base.css file. Thanks!

@media only screen and (max-width: 768px){
.header {
    display: grid;
    grid-template-columns: 1fr auto;
    padding: 0px 0px 10px 0px !important;
}
header-drawer {
    grid-area: 1 / 3;
    padding: 0px 10px;

}
#shopify-section-sections--20431561425211__header > sticky-header > header > a > div {
    grid-area: 1/1 !important;
}
.header__icons {
    grid-area: 1/2 !important;

}
}

And Save.

Thanks!