Logo: Center your logo and navigation menu on desktop

This customization will center your logo and navigation items below the logo. 

Example result:

Before:

How to:

1

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:

2

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:

nav--desktop

Example:

We will work with the line right below that line. 

Add a <center> tag before and a closing </center> tag after:

Save the file:

3

Add CSS to theme.scss

Final step - Add the following CSS snippet to the bottom of Pipeline's main CSS file:

Click to view code

Where do I add the code?

Use this link to learn where exactly to add this code snippet:

Where to add your CSS style code

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:

Click to view code - Earlier versions of Pipeline only