Header Customization for Horizon Theme

Store Design
, ,
1

Hey !

I was building a customizing the header in horizon theme , and unfortunately I tired many css options, but nothing has worked. Is there anyone know what exactly the changes needed to achieve the similar header ? With margins left and right, and dividers

Your advice will be highly appreciated.

IMG_7184
IMG_71841179×1643 189 KB

2

Hey @Pilotwolf

Can you share your store URL and Password (if enabled) so I can have a look and point you to the right direction?

Best,
Moeed

3

The layout you’re trying to achieve is usually a mix of three things inside the header container: a max width wrapper, horizontal padding, and border separators between the menu items or sections.

With Horizon specifically, a lot of the spacing is controlled by flex containers and CSS variables, so adding margin alone often won’t change anything because the parent wrapper is still set to full width.

I’d probably inspect the outer header wrapper first rather than the individual menu items. In many cases the dividers are also being added with pseudo elements instead of actual borders, which is why simple CSS tweaks sometimes don’t respond the way you expect.

Did you modify the header through custom CSS only, or did you also change the theme section structure/liquid?

4

Hi @Pilotwolf

Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

Best regards,
Devcoder :laptop:

5

Hey ! Moeed,

Here is the URL : https://embign.myshopify.com/

Password: 1

6

Hey ! Moeed,

Hey Devcoders,

Here is the URL : https://embign.myshopify.com/

Password: 1

7

I tried to Modify it using css inside the header.liquid. earlier i managed to move the icons all the way to the right using the css only. so i thought i could do this header style using css only. but unfortunately, it creates some margins over the header, but the dividers are difficult to manage.

8

Hey @Pilotwolf
Add proper header container spacing

Add this CSS:

header .header__inner,
header .header__content,
header .page-width {
max-width: 1200px;
margin: 0 auto;
padding-left: 24px;
padding-right: 24px;
}

  1. Fix alignment (logo / menu / icons)

header .header__inner {
display: flex;
justify-content: space-between;
align-items: center;
}

  1. Remove conflicting divider layers

header::before,
header::after,
header .header__inner::before,
header .header__inner::after {
display: none !important;
}

  1. Add one clean divider

I give you 2 solutions so you can check both but don’t use both use only one

header {
border-bottom: 1px solid #e5e5e5;
}

If this does not show correctly use second instead:

header .header__inner {
border-bottom: 1px solid #e5e5e5;
}

  1. If spacing still looks full-width

Then Horizon is forcing full-width container.

Add:

header {
width: 100%;
}

After applying these changes, the header will be properly centered in a boxed layout with balanced left and right spacing, matching a clean structured design. The icons will remain correctly aligned on the right without affecting the layout. The divider will appear clean, stable, and properly positioned, and the full-width stretching issue will also be fixed so the header follows a controlled modern structure instead of an edge-to-edge layout.

If this still does not work on your side, please let me know I will help you troubleshoot it step by step until it is fully fixed.

Thank You

9

Hi @Pilotwolf,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

@media screen and (max-width: 749px) {
.header__row.header__row--top {
    padding-inline-start: 1rem;
    padding-inline-end: 1rem;
    border: none;
    padding-block-start: 1rem;
    padding-block-end: 1rem;
}
.header__columns {
    grid-template-areas: "rightMenu rightSearch center rightAccount rightCart" !important;
    --header-template-columns: var(--header-mobile-bookend) var(--header-mobile-bookend) 1fr var(--header-mobile-bookend) var(--header-mobile-bookend) !important;
    border: var(--border-bottom-width) solid var(--color-border);
}
}
10

Hi @Pilotwolf,

Please add the following CSS code at the very bottom of your (base.css) file.

This code applies structural flexboxes with an explicit order sequence to force the 3-column layout on mobile/tablet viewports, ensuring the burger menu stays left, the logo is centered, and utility icons align to the right:

@media (max-width: 989px) {
    .header__columns {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
    }
    .header__column--left {
        flex: 1 1 33% !important;
        display: flex !important;
        justify-content: flex-start !important;
        order: 1 !important;
    }
    .header__column--center {
        flex: 1 1 33% !important;
        display: flex !important;
        justify-content: center !important;
        order: 2 !important;
    }
    .header__column--right {
        flex: 1 1 33% !important;
        display: flex !important;
        justify-content: flex-end !important;
        gap: 10px !important;
        order: 3 !important;
    }
    .header-logo__image {
        margin: 0 auto !important;
        max-width: 80px !important;
    }
 .header__column--right .search-action--hidden-on-drawer { display: block !important; }
}

If this fixes your layout alignment, please mark this reply as an Accepted Solution!