Activate mobile menu

[SOxley]

Hi,

I'm having some trouble with me header menu. I've got two identicial "primary menu filed" sections but no mobile navigation. I'm using one the free Hubspot templates (Martech) but had to copy it to change the font size of my menu font. 

I'd like to keep a top bar menu for desktop but don't want to lose a mobile menu. Support advised me to change the code highlighted below from "display: none" to "display: block". 

Will this activate my mobile menu? And does it solve the two primary menu fileds? 

mobile navigation turned off -- need it to be on

I'm happy to create a navigation just for mobile, just want to check I won't have two menus on my desktop. I'm not a developer but trying my best to make sure my website has a navigation for desktop and mobile use. 

Thanks in advance for your help.

[SOxley]

Thanks @jonchim . That's fixed the final error I had. Like you could mind read where I was going wrong. Thanks very much for your support. That's helped me out a lot. 

[jonchim]

No problem @SOxley ! let me know if you need help with anything else 🙂 

[jonchim]

no worries @SOxley If you navigate to marketing > website pages, have you created any website pages? If not would you be able to create just a test page and then send me that link?

[SOxley]

Oh right. No problem. Here we go: https://ame-3d.co.uk/-temporary-slug-c3a7150d-3405-4f63-a8f4-84fa6057c05d?hs_preview=HBJyqecD-468427... 

Thanks 🙂 

[jonchim]

@SOxley ahh i see what's happening now, it looks like your top bar navigation and main navigation are being used in both placed. Looks like the main nav is white which made the mobile menu white as well. Changing the link color and menu color to a darker color should make it function as intened. But maybe there is a reason the main navigation isn't being used? 

[SOxley]

Thanks @jonchim. Yeah, it's a bit complicated really. The top bar is meant to be the main and only nav. Every time I try to fix it a new nav automatically sets itself up. I'm worried about ending up with 5 navs soon. Im trying to work out how to set the code so that I only have one navigation that works for desktop and mobile. I don't understand why there are multiple navs in the first place.  I did mofidy the top nav to let me have a bigger font. This is where the trouble started.  

I think there's an override action somewhere that won't accept the top bar as the main and only nav. I'm trying to work out how to delete the two bottom navs and to only have the top nav as the main nav. Who'd know changing a font size would have so many repercussions. Haha 

[jonchim · Accepted solution]

Got it @SOxley, looks like you're heading in the right direction. You'll want to set the top bar to hidden when the mobile nav shows up, currently .header__top-bar is set to display: block;

.header__top-bar {

display:none;

}

[jonchim]

Interesting, the mobile menu should be visible by default. @SOxley would you be able to provide a dev link so I can take a closer look?

[SOxley]

Thanks @jonchim . I was a bit surprised myself that the default wasn't there. Here's the dev link for a closer look. 

[jonchim]

Sorry @SOxley , would you happen to have a link that's not the hubspot design manager, a link to hs-sites site page?

[SOxley]

Sorry @jonchim. I don't really know what you mean. The website isn't live yet, so I can't provide a live url (if that's what you meant). All I have is the code from the design manager or some screenshots. Not sure if these will be helpful? 

[dennisedson]

@jonchim , any advice for @SOxley