Remove navigation hamburger menu

[stephaniengan]

Hey everyone, 

I know this question has been asked a thousand and one times, but nothing seems to be working for me!

I'd like to hide the navigation menu on my site, as i've only got one page.  In particular, i'd like to remove the 3-line 'hamburger' menu from the mobile version of the page.  

i've tried embedding the following into the settings > SEO > Header code section, as well as embedding it as code on the page itself :

<style>
#header-wrap { display:none; }
#birdseye-header { display:none; }
#nav-wrap { display:none; }
#navigation { display: none !important; }
#hamburger { display:none; }
</style>

Can someone help me out please?

The website is: https://www.mondoforma.com/

Thanks very much!

Steph

[braybin]

@stephaniengan

You are right there! When I took a look in the stylesheet I could see you targeting the burger menu to have it display none. Try adding an '!important' after 'none' before the semi colon. That should allow your style to take precedence.

The strikethrough means that the style is being overwritten somewhere else.

[stephaniengan]

Hi Braybin, 

thanks for looking into this for me!

I've revised the code in the Settings > SEO > Header code and custom HTML code section, but still no luck:

<style>

#hamburger { display:none !important; }
#birdseye-header { display:none !important; }

</style>

[braybin]

@stephaniengan

You are referencing 'hamburger' as it were its id (when you use the '#'). Change your '#hamburger' to '.hamburger' so the CSS points to the hamburger class instead of the hambuger id. I totally missed that the first time around that you had it like that and didn't point out that in my screenshot it was using the '.hamburger'. Change that and let me know if it works for you.

[braybin]

Same with the '.birdseye-header'

[stephaniengan]

Success!  thank you so much!!

[freebirdpaperie]

Hi guys,

I'm trying to accomplish the same exact thing on weddingmenu.weebly.com, and the white navigation bar/panel is still appearing on top (I did manage to get the hamburger icon to disappear on both desktop and mobile, so I'm happy about that!).

Here is where I landed after changing things and trial-and-erroring for a while.

<style>
.header-wrap { display:none !important; }
.nav-wrap { display:none !important; }
.navigation { display: none !important; }
.hamburger { display:none !important; }
</style>

This is in the SEO header code section and embedded on my only website page as custom code. I have this page turned off in navigation, and under the Theme Options I have Collapse Navigation toggled to the right (on?).

Thank you!

Emily

[freebirdpaperie]

Disregard - I ended up finding this page which finally did the trick (please note that everyone's code will be a bit different, per Adam's instructions). I made the mistake earlier of trying to copy/paste the original poster's code (with the commentor's edit suggestions) to no avail and then finally found this help article by Adam that explains how to find the code you need on your site! Good luck everyone! XO

Emily

[Keattonm]

I'm in a similar situation, except I want to take away the hamburger and have the full menu displayed across the banner. 

I've found the optimized mobile display is crap so I trashed that and now the mobile version is exactly like the desktop - except for some reason the hamburger is still on the mobile version rather than the banner.

Any suggestions for how to accomplish this?

[Bernadette3]

Hi @kealtonm. Do you have a lot of pages? That might not be a great user experience if someone is on a smaller device. What is the name of your site?