Centred logo and navigation
Centred logo and navigation
You can centre Label’s logo and main navigation for desktop layouts by following the steps in this guide.
This customization modifies the header’s layout when there is no header banner block and when the desktop layout is set to the “Logo to the left” setting in the Header section’s settings. The layout you’ll be creating replaces the “Logo to the left” layout and it won’t work if you have the header banner image block enabled. These changes overwrite the existing header. Please backup the theme by creating a duplicate so you have access to the unmodified code in case you want to use either of these features in the future.
This layout works best with few navigation items, three or four at most. If you need a more flexible option, reach out to a third-party developer for assistance.
We’ll be editing the file Sections / header.liquid.
Make space by making the cart area smaller
Find the div with the class headerInnerWrap. Inside this div, find the line of Liquid that reads, {% if section.settings.header_layout == 'layout_left' %}. In the “else” block of this code, change the cart_classes variable to take up one sixth of the space on large viewports. The line should now read {% assign cart_classes = "large--one-sixth" %}.
(Depending on your version of Label, the surrounding code might look slightly different and the line numbers may not match up.)
Make the logo and navigation area wider and centre-align the text inside it
Just below the code you just changed, find the wrapper div for the logo and navigation. It will have the classes large--three-quarters and text-left. Change the size class to large--two-thirds and add the class large--text-center.
Add an empty spacer
Right before the div you just modified, add a new empty div with the classes grid__item large--one-sixth medium-down--hide.
Move the navigation under the logo
We’ve got the basic layout now, we just need to move the navigation to its own line as it currently follows the logo. To do this we will open the file Assets / theme.scss.liquid and, at the end, paste this code:
@include at-query ($min, $large) {
.site-nav {
display: block;
}
}
