Problem with mobile menu

SOLVE
CSarzana
Member | Gold Partner

Hi everyone, I'm struggling with mobile menu...

I create my own blog template and I'm trying to make responsive my menu.

I'm using an html template and trying to follow this instructions:

https://designers.hubspot.com/docs/snippets/responsive/how-to-implement-a-fixed-top-mobile-navigatio...

 

This is my actual code:

<div id="header-navigation">

<div class="mobile-trigger">

</div>
<div class="custom-menu-primary">
{% menu "my_menu" id=40652450095, overrideable=False, root_type='site_root', flyouts='true', max_levels='3', flow='horizontal', label='Menu Indoostry' %}
</div>
</div>

 

But when I see a page on mobile, nothing appear.
This is an example page:

http://indoostry-8421739.hs-sites.com/blog/software-in-cloud-e-on-promise-qual-%C3%A8-la-scelta-gius...


What am I missing?

 

Thanks,
Camilla

0 Upvotes
1 Accepted solution

Accepted Solutions
stefen
Solution
Key Advisor | Partner

@CSarzana looks like your mobile-trigger div doesn't have the <i></i> inside of it which is what the CSS is looking for to make the hamburger menu (the three lines icon). Check your javascript file and make sure you populate that div with something otherwise it won't have a height and therefore won't show up on the page.

Stefen Phelps, Community Champion, Kelp Web Developer

View solution in original post

1 Reply 1
stefen
Solution
Key Advisor | Partner

@CSarzana looks like your mobile-trigger div doesn't have the <i></i> inside of it which is what the CSS is looking for to make the hamburger menu (the three lines icon). Check your javascript file and make sure you populate that div with something otherwise it won't have a height and therefore won't show up on the page.

Stefen Phelps, Community Champion, Kelp Web Developer

View solution in original post