Flex Theme Header Tutorial: How to Center the Logo
When building client websites, I always look to start with a paid premium theme that closely resembles the design I'm going for. Sometimes there isn't really anything that fits well -- some themes have some sections I need, while others have other sections, or I have a completely custom design. So lately I've been building most of my websites with Flex theme. It is a bigger investment upfront, but I'm able to work the theme cost into the price, and it saves me hours and hours of work. Plus, when I work with one theme all the time, I'm able to re-use any code customizations I've already done, saving me even more time and allowing me to provide more custom website design.
Shopify Flex Theme Header Options
Although Flex offers four (yes, FOUR) different headers, they were still missing the one header I was looking for. I wanted the logo in the middle, and the navigation on the left. Flex does offer a centred logo layout, but the options are to either have a split navigation around the menu (I also love this look) or have the navigation under the logo (I hate this look as it makes the header quite large, wasting a lot of space above the fold).
So I had no choice but to figure out how to make the header I wanted and luckily for me, it was pretty simple. Luckily for you, I'm going to share the steps to make it happen right here!
OOTS Flex Theme Header Tutorial
Start by opening the theme code. Go to Online Store --> Actions --> Edit Code.
1. In the Sections folder, create a new section named "header-custom.liquid". Copy all the content from "header-classic.liquid" and paste into the new file. Click Save.
2. In the Config folder, open "settings_schema.json". Find the header options, and add a "custom" option as shown in the image below. If you're not familiar with writing schema, be very careful of the commas and follow the highlighted code exactly. By doing this, we're adding the header option to the theme customizer so that we can easily switch header style.
3. In the Sections folder, open "theme.liquid". Search for header again until you find the header logic. Here we want to make sure the custom header is being added to the website. Add the code as shown below.
4. In the Assets folder, open "styles.css.liquid". Search for "Header - Classic" to find the Classic Header specific styles. Now you'll duplicate this code. Copy everything from this comment until just before the next, and paste it directly under. Replace "{%- if settings.header_layout == 'classic' -%}" with "{%- if settings.header_layout == 'custom' -%}". Be sure that you have duplicated all 60 lines of code and made that change to the conditional logic. See how this looks at the end of the next step.
5. Still in "styles.css.liquid", let's make a few style changes:
- Under ".header__brand", delete the first line "flex: 0 0 auto;". ( I've commented it out so you can see the changes I made)
- Under ".header__menu", change the first line from "flex: 1 1 auto;" to "flex: 1;". (I've commented it out and added the change below)
- Add a new style:
By giving the outer sections (the navigation menu and the icons) a flex of 1, we can ensure that the logo will be centered no matter the width of the other two sections.
6. In the Sections folder, open the "header-custom.liquid" section you created in step 1. In the image below, you can easily see in the inspector that there are 3 main sections that affect us: the navigation menu, the logo and the icons. We need to switch the order of the first two (header__brand and header__menu). Currently the logo comes first but we want it to come second.
In the code editor, I recommend collapsing the sections as you see in the Inspector with the little triangle on the left. This will make it easier for you to separate the sections. Highlight and cut the first section, make some space under the second section, and paste it there. Click save and delete any empty space if you'd like.
7. Lastly, we need to switch the header that the site is using. Open up your theme customizer. Go to Theme Settings --> Layout --> under Header, select the new Custom option. Now you'll need to go back and customize the Header with your logo, colors and other settings. You're all done!
Let me know if you found this article helpful or have any questions by leaving a comment below. Thanks!
If you'd like to purchase the Flex theme, consider using our affiliate link here.
If you found this helpful, you might like to check out our Shopify Store Launch Kit.
Hana Drdla
