How to I make my menus all on the same level?

Solved
Highlighted
Excursionist
29 0 5

I'm using debut, and I'm wondering how I can make my levels so that they are all on the same level instead of being above of below each other. 1st Image is what I want it to look like, 2nd image is what it looks like now. 

 Captureasdasd.PNGasdasd.PNG

0 Likes
Highlighted

Hello @TCA-USA,

Can you please share your site url

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
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Excursionist
29 0 5
Highlighted

@TCA-USA,

Add this css at the bottom of

Online Store->Theme->Edit code->Assets->theme.scss.liquid

#AccessibleNav .site-nav a {
    padding: 3px 0px;
}
#AccessibleNav span.site-nav__label {
    font-size: 13px;
    font-weight: 700;
}
button.site-nav__link.site-nav__link--main.site-nav__link--button {
    padding: 3px 5%;
}
#SiteNav li:last-child {
    padding-left: 2%;
}
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
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Excursionist
29 0 5

Thank you!

0 Likes
Highlighted
Excursionist
29 0 5

@oscprofessional 

What can I do so that when I add new menus it doesn't cause this to happen more? Can I fix this without changing the text size? 

Thankssomethigq.PNG

0 Likes
Highlighted

This is an accepted solution.

@TCA-USA,

Add this css

@media only screen and (min-width: 1023px){
header .logo-align--left,header .site-header__icons {width: 13%;}
#AccessibleNav {width: 74%;}
}

@media only screen and (min-width: 1023px){
header .logo-align--left,header .site-header__icons {width: 16%;}
#AccessibleNav {width: 68%;}
}
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
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Excursionist
29 0 5

Works! Thank you. 

0 Likes