Refresh theme Move Navigation Bar to centre and Move Logo far left

[viral1]

Theme - Refresh
Website - https://airleap.co/
Would like to move navigation bar to centre of screen. And move my logo to the far left side of the screen.
Thanks 🙂

[shreyhweb]

@viral1 

Hello,

please add below code above </body> in theme.liquid

online store >> edit code >> theme.liquid

<style>
@media screen and (min-width: 990px){
.header {
    grid-template-columns: 1fr auto 1fr!important;
    max-width:100%!important;
}

}
</style>

after adding this code look like

If our solution helpful for you then please like and tap on accepted.

Thankyou 🙂

[MRmitch]

For me the code made it move to the left, can you help me get it to the middle

[Ollie]

Hey @viral1.
 
Thanks for reaching out. 
 
Did the coding change advised by @shreyhweb, do the trick for you? If so, be sure to mark their post as a solution to inform others that may view the thread.
 
Looking into the Refresh theme, I noticed that moving the logo and navigation head menu is not available using the Theme Editor. With that being said, it would be possible to have the header section displayed as you would like by making a change to the theme's coding. Since the Refresh theme is designed and supported by Shopify, we can use free design time for Shopify themes to allow our internal team to make the change on your behalf.
 

 
If you are interested in using the design time, you will need to login to your store using the Contact Us page. This will allow us to securely verify you as the store owner before speaking directly with a Support Advisor about the changes you would like to see. 
 
Let me know if you have any questions.

[Made4uo-Ribe]

Hi @viral1 ,

Try this one. 

1. From your Shopify admin dashboard, click on "Online Store" and then "Themes".
2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
3. In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
4. And Save.

header.header.header--middle-left.header--mobile-center.page-width.header--has-menu {
    max-width: 100%;
    grid-template-columns: 1fr auto 1fr;
}

Result:

I hope it help.