How to align main menu to be on either side of logo

[okchaychay]

Hello!

I'm using the Ride by Shopify theme and I'm looking for guidance with my navigation menu. I'd like to align my main menu to appear on either side of the logo on the same line, so half of the menu would appear to the left and half of the menu would appear to the right. How would I go about doing this through my theme code? 

You can find my website here

Password: chickendumplings

[GemPages]

Hello @okchaychay ,

It's GemPages support team and glad to support you today. I would like to give you the recommendation to support you.

In this case, basically, you need to edit the HTML structure of the theme and it will be a bit complicated.

However, I give you another option. If you will fix your menu like that, you can try using my below suggestion:

1. Go to Online Store > Theme > Edit code of your current theme

2. Open your theme.liquid theme file

3. Paste the below code before </head>

<style>
@media (min-width: 769px) {
 .header nav.header__inline-menu {
   position: absolute;
   z-index: 1;
 }
 .header nav.header__inline-menu .list-menu li:nth-child(3) {
   margin-right: 90px;
 }
 .header nav.header__inline-menu .list-menu li:nth-child(4) {
   margin-left: 90px;
 }
 .header .header__heading {
   z-index: 9;
 }
}
</style>

For example,

*One more time: my code just be suitable in this case that your menu be kept as it is

If you require any further information, feel free to contact me.

Best regards,
GemPages Support Team

[Abdulrafay1018]

I can not fix my menu bar beside my logo. Please help.

[BSS-Commerce]

Hi @okchaychay 

Please follow these steps:

1. Go to Online Store > Theme > Edit code 

2. Open your theme.liquid theme file

3. Paste the below code before </head>

<style>
@media (min-width: 990px) {
 .header nav.header__inline-menu {
   position: absolute;
   z-index: 1;
 }
 .header__inline-menu .list-menu li:nth-child(3) {
   margin-right: 92px;
 }
 .header__inline-menu .list-menu li:nth-child(4) {
   margin-left: 92px;
 }
 .header .header__heading {
   z-index: 2;
 }
}
</style>

I hope that it works for you.

[cocoandbie]

Hi there. I have tried the above and it doesn't line them up correctly. Could you pretty please kindly help me?? My page address is https://cocoandbie.myshopify.com/

Thank you so so much - Becky M