Hamburger menu and all menu items are showing

[KatyMF]

Hi,

On the menu bar it always shows all the menu items AND the hamburger menu icon (which opens up a sidebar to show exactly the same menu items as you can already see in the main menu).

How do I make sure that EITHER the individual items OR the hamburger menu (depending on screen size) show, and not both at the same time?

This is how it currently looks:

The live URL is https://www.marginfuel.com/

Advice for getting the button to come up to the same level as the menu items would be great too - even on screen sizes where there's plenty of space it always shows on the second line (unless I delete a couple of menu items completely to create lots more space).

[Jake_Lett · Accepted solution]

Hi Katy,
Below are the changes I would have your developer make in order to achieve your desired result. If you need implementation help let me know.

• Delete the "home" link in the navigation and rely on the logo to be your home link - this will make everything fit on one line on desktop
• Write a media query 1140px and above to hide the mobile menu
• Change the background color of the mobile toggle menu when it is open to a light gray or white. Currently, it is dark gray and it is hard to see.

Jacob

[KatyMF]

Hi Kevin, sure, I didn't realise you can't see the reply above. The URL is https://www.marginfuel.com/.

Thanks!

[Kevin-C]

Thanks @sharonlicari 

Hey @KatyMF 

Could you share a the page with us? A live version will help us diagnose much faster!

[KatyMF]

Hi Sharon - thanks, the URL is https://www.marginfuel.com/

[Kevin-C]

Hey @KatyMF 

Great news!

Looks like you're using the Act2.1 template, which has absolutely awesome documentation (very rare)!

They even have a page dedicated to hiding the hamburger menu on desktop here.

TLDR; you can add these two classes to the "menu-button" in the drag and drop template builder: hidden md-visible

To get the "FREE DEMO" button inline with the rest of the menu you'll have to mess around with the template editor or add it to the menu and style it with css to look like a CTA button.

[sharonlicari]

Thank you @KatyMF 

Hey @piersg @Kevin-C @mangelet any tips or suggestions you can share with @KatyMF?

Thank you

Sharon 

[mangelet]

@KatyMF i would suggest you create 2 hubspot menus: the desktop version and the hamburger version). Also you may have 2 versions of the html rendering the same menu for desktop and hamburger if your menu-items are the same). Then when rendering the page use mediaqueries to decide which menu is "hidden" and which is "visible" at a given resolution ...

[sharonlicari]

Hi @KatyMF 

Welcome to the Community!

Could you please share the URL you have been working on? With this information, I'll be able to invite a few experts to share their thoughts about this. 

Thanks

Sharon