topic Activate mobile menu in CMS Development

Activate mobile menu

SOxley — Mon, 10 May 2021 13:22:45 GMT

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.

Re: Activate mobile menu

dennisedson — Mon, 10 May 2021 15:06:18 GMT

@jonchim , any advice for @SOxley

Re: Activate mobile menu

jonchim — Mon, 10 May 2021 15:23:35 GMT

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?

Re: Activate mobile menu

SOxley — Mon, 10 May 2021 15:41:07 GMT

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

Re: Activate mobile menu

jonchim — Mon, 10 May 2021 15:39:05 GMT

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

Re: Activate mobile menu

SOxley — Mon, 10 May 2021 16:03:52 GMT

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?

Re: Activate mobile menu

jonchim — Mon, 10 May 2021 16:07:23 GMT

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?

Re: Activate mobile menu

SOxley — Mon, 10 May 2021 16:10:49 GMT

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

Thanks 🙂

Re: Activate mobile menu

jonchim — Mon, 10 May 2021 16:41:24 GMT

@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?

Re: Activate mobile menu

SOxley — Mon, 10 May 2021 17:26:44 GMT

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

Re: Activate mobile menu

jonchim — Tue, 11 May 2021 12:13:04 GMT

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;

}

Re: Activate mobile menu

SOxley — Tue, 11 May 2021 12:40:48 GMT

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.

Re: Activate mobile menu

jonchim — Tue, 11 May 2021 12:55:19 GMT

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