FROM CACHE - en_header

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

okchaychay
New Member
1 0 0

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

Replies 2 (2)
GemPages
Shopify Partner
3539 791 652

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

GemPages_0-1670299200251.png

 

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,

GemPages_0-1670299794124.png

 

*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

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
BSS-Commerce
Shopify Partner
815 127 116

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>

view (100).png

I hope that it works for you.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.
BSS Commerce - Shopify Apps & Store Development Service Provider
Hire a Shopify expert | Shopify Plus Store Development
Install B2B & B2C apps to accelerate sales