Horizon Theme Mobile Header Icon Positions

Store Design

Topic summary

A user is customizing the Horizon Theme v3.0.1 header layout to achieve consistent icon positioning across desktop and mobile viewports. The goal is to maintain uniform visual spacing for all header icons while only converting the menu to a hamburger icon on mobile.

Specific adjustments needed:

  • Desktop: Reduce excessive padding/margins (too much space left of logo and right of cart icon). Reference site mythical.com shows desired spacing.
  • Mobile: Move logo away from left edge and reduce gap between account and cart icons.

Constraints:

  • Logo is currently a placeholder with dimensions subject to change
  • User has minimal coding experience and seeks the simplest solution that allows easy future adjustments
  • Store URL and password provided for reference (fangandfiber.com / MerchMania)

The discussion remains open with no responses yet.

Summarized with AI on October 27. AI used: claude-sonnet-4-5-20250929.
1

Hello,

I am working with the Horizon Theme v3.0.1 and like the layout of the header in the desktop viewport, however, I want to reposition the icons. I want the header for both the desktop and mobile viewports to match for consistency. I want all icons to maintain the same visual spacing. The only change should be the menu converting to the hamburger icon.

A placeholder image is in use for the logo and will be changed in the future with different dimensions. I seek the simplest way to accomplish the above, while offering ease-of-use for adjustment in the future. I can do minimal coding, but it’s not my strong-suit - less is more.

In the desktop viewport, I want to adjust the padding/margins for the icons - there is too much space on the left of the logo and the right of the cart icon. For inspiration, the spacing for the header on this website: https://mythical.com/ is roughly what I’m seeking.

In the mobile viewport, the logo is too close to the left and there is too much space between the account and cart icon.

Website: https://fangandfiber.com/

Password: MerchMania

If any additional information is needed, please let me know and I will provide it promptly.

Thanks in advance, I appreciate any assistance given!

2 Likes
3

Hi :waving_hand:
You can fix that spacing by slightly adjusting the header’s padding and flex alignment in your theme’s CSS.

From your Shopify admin, go to:
Online Store → Themes → Edit code → Assets → base.css (or theme.css)

Then add this at the bottom of the file:

/* Adjust header icon and logo spacing /
.header__logo {
margin-left: 20px; / adjust to your preference /
}
.header__icons {
margin-right: 20px; / adjust to your preference /
display: flex;
gap: 15px; / consistent spacing between icons */
}

/* Mobile view tweaks */
@media (max-width: 768px) {
.header__logo {
margin-left: 10px;
}
.header__icons {
margin-right: 10px;
gap: 10px;
}
}

Adjust the pixel values until the spacing matches what you see on mythical.com.

This will keep your header layout consistent between desktop and mobile while keeping things easy to modify later.

2 Likes
4

Hello Wesley,

Thanks for the suggestion!

I tested this by inserting it into the base.css file within the assets, but it makes zero change in either viewport when the px values are adjusted for the margins or gaps. Thoughts?

1 Like
5

Hi there :waving_hand:
The Horizon theme uses slightly different class names and layout containers, which is why the earlier CSS didn’t take effect. Try using these updated selectors — they target the correct header structure:

/* Adjust header logo and icon spacing */
header.site-header .site-header__logo {
margin-left: 20px !important;
}
header.site-header .site-header__icons {
margin-right: 20px !important;
display: flex !important;
gap: 15px !important;
}

/* Mobile spacing adjustments */
@media (max-width: 768px) {
header.site-header .site-header__logo {
margin-left: 10px !important;
}
header.site-header .site-header__icons {
margin-right: 10px !important;
gap: 10px !important;
}
}

Save your changes, then clear your browser cache and refresh in an incognito window — that often helps display the new layout.

This version uses stronger selectors (!important) to override default theme spacing and should keep both desktop and mobile headers consistent.

2 Likes
6

Thanks again, Wesley.

I tested the updated code you provided, cleared the browser cache on multiple devices each time I attempted to make adjustments, opened a new incognito window each time, and still saw no changes in either viewport when changing the px values for the margins or gaps.

This theme is nice, but it’s been a pain when editing code like this. Thoughts?

1 Like
7

Hi @FangandFiber

Welcome to the community.

If you want to make the search icon the right distance from others and add some padding with the whole header, try this code at the end of base.css.

@media screen and (max-width: 749px) {
	.header__columns {
		padding-left: var(--page-margin) !important;
		padding-right: var(--page-margin) !important;
	}
}

@media screen and (max-width: 749px) {
    .header__columns .search-action {
        margin-inline: calc(var(--gap-md) * -1) calc(var(--gap-xs) * -1);
    }
}
2 Likes
8

Thanks, @Laza_Binaery!

This seems to have worked well-enough. While I would like to adjust further, this is sufficient for now and allows me to move onto other tasks. I tested this with alternative logo dimensions and it works flawlessly.

Greatly appreciate the assistance!

1 Like