Move navigation menu under logo text, centred

[hannahjro1]

Is there a way to move our menu navigation under our logo text in the centre? Can't do it in theme settings

url is www.thehomeinterior.com.au

[Hardik2903]

@hannahjro1 

Please go to
1) Online store
2) Themes -> Edit theme
3) Layout
4) theme.liquid and paste this code before </head>

<style>
@media only screen and (min-width: 1149px) {
header .header__wrapper {
  display: flex;
  flex-wrap: wrap;
}

header .header__wrapper .header__main-nav {
  order: 3;
  flex: 0 0 100%;
}

header .header__wrapper .header__main-nav .header__icon-list {
  justify-content: center;
}

header .header__wrapper .header__secondary-nav {
  flex: 1 0 auto;
}
}
</style>

I can only achieve this kind of layout based on the current HTML structure. To achieve same layout, I will need Shopify access to edit the code.

If my solution works, then please like and accept it as a solution.

[hannahjro1]

Thanks this sort of worked but how can I get them all to now line up in the header?

[hannahjro1]

Or can we please move the logo to the center above the nav?

[Hardik2903]

@hannahjro1  Without having access to the store, I can edit more the HTML structure.

[PageFly-Amelia]

Hello @hannahjro1 

This is Amelia at PageFly - Shopify Advanced Page Builder app.

You can try the following steps I have provided to help you solve the problem you are facing:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file base.css

Step 3: Add code

@media (min-width: 768px) {
.header__wrapper {
  display: flex !important;
  flex-wrap: wrap;
}

.header__main-nav {
  flex: 1;
  order: 3;
}

.header__icon-list {
  justify-content: center;
}

.header__secondary-nav {
  flex: 1 0 auto;
}
}

Hoping my solution helps you solve your problem.

Best regards,

Amelia | PageFly

[hannahjro1]

THANKS! Is there any way to move the logo now to above the center nav or make it all line up?