A user is seeking help modifying the Horizon theme’s navigation menu. Currently, the theme displays a full-width mega menu for all dropdown items, but they want only the ‘Services’ menu item to show a standard dropdown box positioned directly beneath it.
Proposed Solutions:
Third-party apps: Multiple respondents suggest using apps like Globo Mega Menu for easier customization without coding, offering granular control over individual menu behaviors.
Custom code approach: One developer recommends editing the theme’s header Liquid file and adding custom CSS to target the ‘Services’ menu item specifically, using positioning properties to override the default full-width behavior.
Existing tutorial: A reference to a previous community thread addressing similar Horizon theme menu issues was shared.
The discussion remains open with no confirmed resolution yet. The user has not indicated which approach they’ll pursue or provided their store URL for direct assistance.
Hi guys,
We built a store on Horizon theme and are a bit stuck on the main menu - it currently comes up as a full width dropdown menu and we would like to have a drop down box that goes specifically under ‘Services’ section of the menu. Can anyone help with that?
Thank you,
Akvile
Hi @akvilest
Are you using 3rd-party app to build mega menu?
If you are, please contact that app to get full support. In case you don’t use any, could you provide me your store url and protected-password (if have) so that I can take a look.
Best,
Danny from Samita Team
Hi there,
If you don’t want to dive too deep into code, I’d suggest using an app like Globo Mega Menu. It lets you fully control how each menu item behaves — for example, you can keep the main navigation full-width, but set Services to have its own smaller dropdown right under it.
This way you don’t need to customize the Horizon theme code directly, and you’ll get more flexibility if you want to adjust your menus in the future.
Best regards,
Sinh Developer, from Tipo
Thank you @Tipo_Sinh-Dev for recommending our app. If @akvilest poster faces any difficulties during the setup process, feel free to reach out to us via email or through the live chat feature in the app.
Best,
Felix
Hello @akvilest
It looks like the Horizon theme’s default behavior is to make the dropdown menu span full width. To have a dropdown appear only under the “Services” menu item, you’ll need to adjust the theme’s header Liquid file and add some custom CSS. Specifically, you can:
li for “Services” with a custom class or ID.position: absolute; left: 0;) scoped to that single menu item.This way, the rest of your navigation can keep the current style, but “Services” will behave as a standard dropdown.
Note: If you’d like my help with these implementations, feel free to contact me at devcodersp@gmail.com
Hi @akvilest,
You can follow my previous tutorial it will show fine. Refer Shopify horizon theme meny drop down is very bad