Supported Versions
The details shared here apply to the most recent versions of our Turbo and Flex themes. To keep your theme up to date, check out this helpful document.
In This Article
Our Turbo and Flex themes both allow for a header layout where your logo is centered in between the main menu links.
How to achieve the layout
-
Turbo
In the Turbo theme, to set up the header with a centered logo with the navigation on either side follow these steps:
Step 1: Split up your main menu into two different menus. In your Theme Editor (customize), under Sections > Header > Menus, assign them under "Main menu" and "Secondary menu" options:
Step 2: Under Sections > Header > Layout, set the "Logo position" to center and the "Menu position" to inline with logo:
Your header should then look something like this:
-
Flex
In the Flex theme, to set up the header with a centered logo with the navigation on either side follow these steps:
Step 1: In the Theme Editor (customize) under Theme Settings > Layout > Header, select the "Centered" option:
Step 2: Under Sections > Header > Logo position, select the "between menu" option:
Step 3: You can then adjust the space between the main menu links and the logo with the "menu spacing" setting.
Your header should then look something like this:
Examples
To see live examples of a header layout where your logo is centered in between the main menu links, check out the following demo shops: