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

Store Design
,

Topic summary

A user wants to replicate Nike’s mobile header layout in their Shopify store using the Spotlight theme: logo aligned left, other icons aligned right.

Initial attempts:

  • Generic CSS solutions using .header-logo and .header-menu selectors failed because these class names don’t exist in the Spotlight theme
  • User struggled to identify correct CSS class names

Resolution:

  • Another community member provided Spotlight-specific CSS targeting .header, .header__heading, and .header__heading-link classes
  • The code uses CSS Grid properties (grid-template-areas, grid-template-columns) and justify-self within a mobile media query (max-width: 989px)
  • Solution confirmed working by the original poster

Key takeaway: Theme-specific class names are crucial for custom CSS modifications. Generic solutions often fail without inspecting the actual theme structure.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
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