Sub navigation doesn't align properly

Solved
New Member
4 0 0

Hi,

 

I am having a bit of a problem with the sub nav on our website. If there are more items than will fit on one line, the alignment of the sub menu goes out of whack. 

 

For example (pictured), under "About" it fits perfectly and the first sub item is aligned directly under the parent item. But under "Support", because it won't fit it gets shifted across. If I remove "corporate membership" from the navigation menu, then it rights itself. It gets really bad under Shop because there's so many sub items and "Shop" is so far to right.

 

Is there a way to put in the condition that if the sub menu doesn't fit, that the last sub item is the one that goes under the parent item rather than the first?

 

Many thanks in advance"

 

 

subnav.png

0 Likes

Hello 

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
New Member
4 0 0

Thank you so much for looking into it! It is https://www.vaginamuseum.co.uk/

0 Likes
Shopify Expert
665 170 199

Hi, @vmuseum ,

This is Evita from On The Map.

 

Is there a way to put in the condition that if the sub menu doesn't fit, that the last sub item is the one that goes under the parent item rather than the first?

No, unfortunately it's not possible, but you can archive this - https://prnt.sc/ptrh3z

 

1. Go to Online Store->Theme->Edit code
2. Asset->custom.scss->paste bellow code in bottom of file

 

.dropdown {
    right: 62px;
}

 

Best,
Evita

On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
0 Likes
New Member
4 0 0

Thank you for this. It solves the shop problem, but now it makes the about menu a bit confusing

sub nav 2.png

0 Likes

Success.

Hello,

1. Go to Online Store->Theme->Edit code
2. Asset->custom.scss->paste bellow code in bottom of file

header nav li:nth-child(6) .dropdown,header nav li:nth-child(8) .dropdown {
	right: 60px;
}
Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
1 Like
New Member
4 0 0

This fixed it perfectly! Thank you so so much.

0 Likes