Hi,
How can I replace my current navigation bar with this new nav bar?
I’m currently just using the standard Shopify Dawn theme.
See new navigation bar here: Auto generate mobile menu using jQuery (codepen.io)
Any help i’d appreciate! Thank you.
Topic summary
A user wants to replace the standard Dawn theme navigation bar with a custom HTML design from CodePen (featuring an auto-generated mobile menu using jQuery).
Key responses:
-
Theme development required: Building a navigation bar is complex. For full integration with Shopify admin and navigation controls, learning Liquid theme development is necessary. Official Shopify theme documentation and Dawn’s header.liquid file (specific line references provided) were shared as resources.
-
Two implementation approaches:
- Static menu: Hard-code the links, comment out the existing navigation logic in the header section, and replace with custom snippet/section
- Custom Liquid section: Hide the default header and add a custom liquid section containing the HTML, CSS, and JS code (including style and script tags)
-
Mobile menu note: Dawn already includes a mobile menu; if issues exist, contact support.
Status: Discussion remains open with no confirmed solution implemented. The user has not responded to the suggestions or shared their store URL for further troubleshooting.
1 Like
Dawn already have a mobile menu, if there is an issue with your contact support.
Building a navigation is one of the more complicated sections of a theme.
If you want it to be actually integrated with your admin and controls such as navigation then you need to learn theme development with liquid.
https://shopify.dev/themes/navigation-search/navigation# Add Navigation to your theme
If it’s just a static menu, where you’ve hard coded the links, then find the navigation logic in the header section and comment it out and replace it with your own snippet or section
https://github.com/Shopify/dawn/blob/main/sections/header.liquid#L153
https://github.com/Shopify/dawn/blob/main/sections/header.liquid#L421
https://github.com/Shopify/dawn/blob/main/sections/header.liquid#L471
Sorry you are facing this issue, it would be my pleasure to help you.
Welcome to the Shopify community! 
Thanks for your good question.
Please share your site URL,
I will check out the issue and provide you a solution here.
If you are using the Dawn theme, you can hide the header and add custom liquid section. When adding your HTML, CSS, and JS code in the custom liquid section, ensure you include the style and script tags.