Center Logo with Menu Links on Both Sides (Refresh Theme)

[JJsPopShoppe]

Hey y’all,

We’re pretty new to Shopify using refresh theme version 2.0.2

Hoping someone could help me out with creating code that would allow our logo to be centered in the header with menu links on either side. I have attached photos of our current and desired layout.

Current layout:

Desired layout (cropped photos together):

Thanks everyone!

[GemPages]

Hello @JJsPopShoppe

I would like to give you the recommendation to support you.

The refresh theme support the Logo top and center so you can go to the Setting and choose that option: https://prnt.sc/eccWkU1Zp0db

I hope the above is useful to you.
Best regards,
GemPages Support Team

[EBOOST]

Hi @JJsPopShoppe

May I suggest to update code these steps:

1. Go to Store Online-> theme → edit code
2. Assets/base.css
3. Add code below to bottom of file

.header--top-center .header__inline-menu{
    margin-top: -60px!important;
  }
  .header--top-center .header__inline-menu .list-menu  > li{
     width: 90px;
     
  }
  .header--top-center .header__inline-menu  .list-menu > li > a{
    white-space: nowrap;
    width: 80px;
    overflow: hidden
    
  }
  .header--top-center .header__inline-menu  .list-menu > li:nth-child(2){
    margin-right: 120px;
  }
  .header--top-center .header__inline-menu  .list-menu > li:nth-child(3){
    margin-left: 120px;
  }

[PageFly-Victor]

Hi @JJsPopShoppe

You can try this code by following these steps:

Go to Online store => themes => actions => edit code and add this code on file theme.liquid before tag

Hope this answer helps.

Best regards,

Victor | PageFly

[Nelle_1]

Hello, I followed your instructions and it totally worked! Thanks a lot!

Now, is there a way to move the right side of the navigation closer to the center logo?