Shopify's Dawn theme is a very clean, well-designed theme with a fair amount of options for customization. When it comes to the header layout, though, the built-in layout choices are somewhat limited. But that's easily remedied with a couple of minor changes to Dawn's sourcecode.
Dawn offers three options for the layout of the logo and the navigation menu in the header:
- Logo left, navigation menu right next to it
- Logo left, navigation menu underneath
- Logo centered, navigation menu underneath
What's missing is an option to have the logo aligned to the left and the navigation menu centered. So let's add that option now.
Before You Begin
Before you make any changes to your store's theme, make sure you know how to use the code editor and create a backup of the theme.
Add a layout option to the logo position dropdown
The first thing we're going to do is add a new option to the Logo position dropdown in the header's configuration settings.
Open the file Sections/header.liquid in the code editor and find the code shown in the following screenshot:
Copy the following code:
Insert the code between the first and second option blocks so the end result looks like this:
Now save the file.
Add the locale string
Now we need to add the text to display in the dropdown for the new option to the locale files.
Open the file Locales/en.default.schema.json in the code editor and find the code that looks like this:
Now copy the following code:
Paste the code immediately after the closing } of the options__3 block so the end result looks like this:
Now save the file.
Apply the necessary styles
As the last step we need to apply the proper CSS styles when the new layout option is selected.
Open the file Assets/base.css in the code editor and find this code:
Then copy the following code:
Insert that code immediately after the ) so the end result looks like this:
Then copy the following code:
Insert that code a couple of lines down below the other related rules so the end result look like this:
Finally, find the following code a couple of lines down:
Copy the following code:
Insert that code immediately after the ) so the end result looks like this:
And that concludes the changes. You should now be able to select the newly added Middle center option from the Logo layout dropdown menu in the header's theme settings.
Have any questions? Found a bug in this tutorial's code? Leave a comment below!