Gap between navigation bar and drop down items.

[Leekasey]

 

Hello. 

I am currently using the split theme. I have moved the logo to the centre and the navigation just below using some suggested css code.  However when highlighting the menu I see gap between menu and drop down items. As you can see on the screenshot. 

any help is highly appreciated. 

thanks. 

[theycallmemakka]

Hi @Leekasey ,

Please provide password to enter your store. I will look into the issue and provide CSS accorgingly.

[Leekasey]

Hello

Thanks for getting back to me

The password is : bachata

Thanks

[theycallmemakka]

Hi @Leekasey 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code just above </head> tag

<style>
.site-nav.style--classic .submenu {
    background: #fff!important;
    padding-top:50px!important;
}
</style>

If you require further help to optimize your store, please don't hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka

[Leekasey]

thank you for getting back to me on this! the solution fixed the issue much appreciated but has caused a new issue to the menu. the padding on the second and third menu has also increased and it looks out of place. thank you for your help in advance.

[theycallmemakka · Accepted solution]

Hi @Leekasey ,

Try replacing the previous code with the below codes.

<style>
.site-nav.style--classic .submenu.mega-menu {
    background: #fff!important;
    padding-top: 25px!important;
}
</style>

Best Regards,
Makka

[Leekasey]

Thank you ever so much! I appreciate you taking the time to help! 

regards. 

[theycallmemakka]

You're most welcome! It's my pleasure to assist. Should you have any other questions or need further assistance, don't hesitate to reach out. Have a fantastic day!

Best regards,

Makka

[PageFly-Richard]

Hi @Leekasey 

This is Richard from PageFly - Shopify Page Builder App, I’d like to suggest this idea:
Online Store ->Theme ->Edit code
Assets ->Base.css

.site-nav.style--classic .submenu.mega-menu {
    background: #fff!important;
    padding-top: 25px!important;
}

Hope you find my answer helpful!
Best regards,
Richard | PageFly