How to fix header design issues on mobile?

Store Design

Topic summary

Problem: After replacing header icons in the Debut theme, the mobile header showed both the menu (open) and close icons at the same time. The logo needed to stay centered.

Fix implemented: A CSS media query (rules applied only below a certain screen width) was added to theme.css for max-width: 750px. It toggles which SVG icon displays based on the header state:

  • .mobile-nav–open: show the first SVG, hide the second.
  • .mobile-nav–close: show the second SVG, hide the first.
    This resolved the overlapping icons on mobile.

Follow-up: The requester asked about adjusting padding/margins for the cart and login icons to match a reference layout. The helper couldn’t reproduce any misalignment above ~452px width and noted typical mobile starts around 481px. A screenshot showed correct alignment.

Outcome: The original icon overlap issue was fixed with CSS. The alignment concern appeared to be a temporary glitch and looked correct upon recheck. No further action items; discussion concluded. Screenshots were provided to illustrate the issues and results.

Summarized with AI on February 11. AI used: gpt-5.
1

Hey, i have a question i have changed the icons on my debut header but when i go to mobile it shows up weird and also the menu and close button show at the same time on mobile.

does anyone know the solutions to this? you can email me or reply here pls!

it looks like this on mobile rn but i want to keep te logo in the middle.

ScepticalClo_0-1659987857484.png
ScepticalClo_0-1659987857484.png549Ă—698 344 KB

Website: Scepticalclothing.com

Password: Drop2

1 Like
2

Hi @ScepticalClo ,

You might have not copied the class added to the SVG. Anyways, you can follow the instructions below to fix it

  1. From your Admin Page, click Online Store > Themes >Actions > Edit code
  2. In the Asset folder, open the theme.css
  3. Paste the code below at the very bottom of the file.
@media only screen and (max-width: 750px) {
.mobile-nav--open svg:nth-child(2) {
    display: none;
}

.mobile-nav--close svg:nth-child(2) {
    display: block;
}

.mobile-nav--open svg:nth-child(1) {
    display: block;
}

.mobile-nav--close svg:nth-child(1) {
    display: none;
}
}
1 Like
3

ayy bro thanks it works, do you maby know how to fix the cart and login logo to where it sits correct with padding and margins just like this:

ScepticalClo_1-1659991491776.png
ScepticalClo_1-1659991491776.png338Ă—111 16.2 KB

only then with the icons i have know on the right, these:

ScepticalClo_0-1659991332451.png
ScepticalClo_0-1659991332451.png378Ă—103 5.15 KB

thanks in advance!

1 Like
4

Hi @ScepticalClo ,

I do not see this problem in 452px above screen size. Mobile screen size is usually 481px

made4Uo_0-1659991838965.png
made4Uo_0-1659991838965.png490Ă—919 419 KB

5

Hey Yeah i see it now as correct aswell, it was probably a glitch for me lol. Thanks a lot for helping have a nice day!

1 Like