Moving logo all the way to the left and other symbols on the right (mobile)

Store Design
,
1

I want to move my logo to the left and the other items onto the right for my header on mobile (just like this photo of nike)

Nike. Just Do It. Nike.com.jpg
Nike. Just Do It. Nike.com.jpg688Ă—320 12.6 KB

. I am new to all the codes and have a tried a few but do not work, the theme I am currently using is spotlight.

2

Hii @ah01

Can you please share the Store URL?

3

It is currently password protected.

4

Can you please let me know the password?

5

To align your logo to the left and other items to the right on mobile, you can achieve this with custom CSS. Here’s a simple example for the Spotlight theme:

@media (max-width: 768px) {
  .header-logo {
    float: left;
  }
  .header-menu {
    float: right;
  }
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

Add this code to your theme’s custom CSS section. If it doesn’t work as expected, inspect your theme’s class names and adjust the CSS selectors accordingly.

Just like “infection control experts” use precise methods to address issues, a bit of CSS tweaking should get your header looking perfect! Let me know if you need further help.

6

This still doesn’t work as it says the header-menu and header-logo aren’t being used in this secion… what other names may it be? or how do i find what name it is. Sorry if these are silly questions I am new to this.

7

Hi @ah01 ,

Please share your store password so that I can help.

Best,
Daisy

8

Hii @ah01

Can you try using this CSS and let me know if it works

@media screen and (max-width: 989px) {
.header {
grid-template-areas: “heading left-icon icons” !important;
grid-template-columns: 2fr auto !important;
}
.header__heading, .header__heading-link {
justify-self: start;
}
}

9

this worked, thank you

11

Seeing how the layout shifts differently between desktop and mobile reminds me of explaining come si legge il codice fiscale: everything makes sense once you understand how each piece is structured. The same applies here, once you identify how the theme handles flex alignment and breakpoints, moving the logo left and keeping the icons on the right becomes straightforward. It’s all about understanding the logic behind the design rather than fighting with it.