Move navigation menu under logo text, centred

hannahjro1
Tourist
10 0 1

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

hannahjro1_0-1713163467770.png

 

Replies 6 (6)

Hardik2903
Excursionist
55 6 7

@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
Tourist
10 0 1

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

hannahjro1_0-1713220732866.png

 

hannahjro1
Tourist
10 0 1

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

Hardik2903
Excursionist
55 6 7

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

PageFly-Amelia
Navigator
316 96 138

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.


Optimize your store’s mobile shopping experience with the Blum theme.

hannahjro1
Tourist
10 0 1

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