How to make header menu "hamburger" style in mobile view
Hey!
I was able to add the hamburger menu for mobile navigation due to some help from another hubspot support memeber I was already speaking with. She had me add code into head html, CSS as stylesheet, and some javascript. Now it appears, but it shows "logo" as a link instead of my logo image.
How can I add the logo image to this navigation bar?
Also, it appears in desktop and mobile view, above the other header. Can you help me with hiding the other header/menu in mobile and only showing the hamburger menu, the logo and a "login" button for mobile nav header? And then only the other header in the desktop view?
there are many approaches you can try. For example:create a mobile version of the header in the "global content" area, wrap it all together in a "mobile" class. The "desktop/non-burger menu should be wrapped with a "desktop" class.
How to make header menu "hamburger" style in mobile view
Thank you Anton! I was able to add the hamburger menu and it seems to work well. Only issue now is I am not sure how to add the logo image and the "login" button. I would also like to make the hamburger icon a little bigger in size.
Here is the current page I am working off of (just focusing on the mobile header):
unfortunately I can't see the page since it's a link to your portal. If you want to share a preview link please click on "preview"(top right corner) and copy/paste the preview link. Thank you.
The logo and login button should be placed in the top part of the code like this:
<div class="mobile header-wrapper">
<div class="logo">{% logo, no_wrapper=True %}</div>
<div class="cta-button">{% module "module_16256511447342" path="@hubspot/cta", label="Mobile CTA", no_wrapper=True %}</div>
<div class="mobile-trigger">
<i class="fal fa-bars mobile-trigger"></i>{# replace with your burger icon #}
</div>
</div>
<div class="mobile-menu-wrapper">
<div class="mobile-menu">{# place menu widget here #}</div>
<div class="cta-wrapper">
{% for item in module.cta %}
<div class="single-cta">
{# place CTA Widget here #}
</div>
{% endfor %}
</div>
</div>
to change the icon size you can either work with the font-awesome size-classes or via CSS like this
.mobile-trigger i{
font-size: {# your desired font-size #};
}
How to make header menu "hamburger" style in mobile view
Hey Anton!
Thank you for the information. I was able to add the logo and the CTA button, but I am having trouble aligning the button to the right and also adding padding to the logo, button and hamburger menu.
I used a portion of the code you sent me and added it into the code I already had for the hamburger menu. Replacing the code I had with the code you sent me did not work.
I also did not have luck with making the hamburger menu icon a little larger.
I have a deadline tomorrow and am hoping to fix the mobile header ASAP..
Please let me know if you can help me with these items.