YIKES! Need help in my header. Dawn Theme.

[Justin34]

Hi all.

I am using the dawn theme. I wanted to add a hamburger menu in the header instead of the usual menu. However, while I was able to add a hamburger menu, the original menu is still showing.

This is how my menu looks now:

See, the hamburger icon is below the logo. I want the logo to be centered and the menu icon to be on the left hand side. I also want the top navigation removed since its now in the hamburger menu. But I got no idea what to do.

Here is the code I used to add the hamburger menu:

@media screen and (min-width: 990px){
.header--top-center>.header__search, .header:not(.header--top-center) *>.header__search {display: none !important;}
.header:not(.header--middle-left) .header__inline-menu { display: none !important;}
.header--top-center *>.header__search, .header:not(.header--top-center)>.header__search { display: inline-flex !important;}
header-drawer {display: block !important;}
}

Any help would be greatly appreciated. Here is my website link www.PennsylvaniaParks.org

Thank you in advance!

[GemPages]

Hello @Justin34 

This design from the theme

You can follow these steps:
1. Go to Online Store->Theme->Edit code

2. Open your theme.liquid file, paste the below code before </body>

<style>
header-drawer {
    display: block !important;
}
.header__inline-menu {
    display: none !important;
}
</style>

I hope the above is useful to you.

Kind & Best regards,
GemPages Support Team