Logo: Center your logo and navigation menu on desktop
This customization will center your logo and navigation items below the logo.
Make a duplicate of your theme
This is important as we are going to replace some key parts of your theme. You'll need the duplicate if there is any issue with the code changes or if you'd like to go back to the original format of the theme.
Draft themes: If you're make this code modification to a draft theme, then duplicate that version. Use Actions link associated to the theme you're duplicating:
Code Editor - Modify header.liquid
From the Sections folder, open header.liquid:
Find the following line. In the code area, use the Find feature (Command-F on Mac, Control-F in Windows) and search for:
We will work with the line right below that line.
Add a <center> tag before and a closing </center> tag after:
Save the file:
Add CSS to theme.scss
Final step - Add the following CSS snippet to the bottom of Pipeline's main CSS file:
Where do I add the code?
Use this link to learn where exactly to add this code snippet:
Older versions of Pipeline
In addition to the CSS code in Step 3, you can add this CSS code after to help with spacing of your logo and centering the navigation menu items in your header: