Supported Versions
The details shared here apply to the most recent versions of Retina, Parallax and Mobilia. To keep your theme up to date, check out this helpful document.
From the Header section in the Theme Editor (customize > sections > header), there are 3 values that allow you to fine-tune the spacing around your logo, navigation, and the page content that appears below the navigation bar.
Logo top padding
This setting is found in the following themes: Retina, Parallax, Mobilia
This is the area above your logo. If you find that your logo is small and not naturally inline with your menu, you can add some padding above the logo to nudge it's position a bit lower.
Navigation top padding
This setting is found in the following themes: Retina, Parallax, Mobilia
If your logo is fairly tall, you may want to push down your menu a bit to be centered with the logo.
Content area top padding
This setting is found in the following themes: Retina, Parallax
The content area refers to the entire section below the main navigation bar. If your navigation bar becomes quite tall (either from a large logo or several links), then it might start to cover your main content. You can use this setting to push your content further down to page so that it's not obstructed by a large navigation bar.
Turbo merchants
The 'Logo top padding' and 'Menu top padding' settings have been removed in the 6.0.3 release to provide a more consistent and reliable Header layout.
If you find the need to make small adjustments to these areas, you can try adding some custom CSS to the bottom of the styles.scss.liquid file (Online store > Themes > Actions > Edit code > Assets > styles.scss.liquid) and play around with the values – 12px is what is currently applied.
Please note: we recommend creating a duplicate copy of your theme first in order to ensure no mistakes are made to the live version.
.header__logo {
padding-top: 12px !important;
}.nav {
padding-top: 12px !important;
}