CMS Development

SBruno
Member

How to make header menu "hamburger" style in mobile view

Hello!

 

I am trying to get the mobile header/footer of my website/landing page to look like the images attached.

 

Since this is "global content", I am not sure how to make it look different from the desktop version. 

I believe I need the "hamburger" style menu for the header and I need the alignment of the menu links in the footer to change. 

 

Here is the link to the page: https://app.hubspot.com/content/5258553/edit/48597179033/content

 

Any and all is appreciated! I took a look at forum to insert the hamburger menu, but it did not help.

 

Thank you!

 desired top header in mobiledesired top header in mobileonce hamburger is clickedonce hamburger is clickeddesired bottom footer in mobiledesired bottom footer in mobile

0 Upvotes
6 Replies 6
webdew
Guide | Diamond Partner
Guide | Diamond Partner

How to make header menu "hamburger" style in mobile view

Hi @SBruno ,

Send Me Live Link I will tell you how to add and send me your code also meanwhile you can use this Java Scripit.


$(function() {

/**
* Mobile Nav
*
* Hubspot Standard Toggle Menu
*/

$('.custom-menu-primary').addClass('js-enabled');

/* Mobile button with three lines icon */
$('.custom-menu-primary .hs-menu-wrapper').before('<div class="mobile-trigger"><i></i></div>');

/* Uncomment for mobile button that says 'MENU'
$('.custom-menu-primary .hs-menu-wrapper').before('<div class="mobile-trigger">MENU</div>');
*/

$('.custom-menu-primary .flyouts .hs-item-has-children > a').after(' <div class="child-trigger"><i></i></div>');
$('.mobile-trigger').click(function() {
$(this).next('.custom-menu-primary .hs-menu-wrapper').slideToggle(250);
$('body').toggleClass('mobile-open');
$('.child-trigger').removeClass('child-open');
$('.hs-menu-children-wrapper').slideUp(250);
return false;
});

$('.child-trigger').click(function() {
$(this).parent().siblings('.hs-item-has-children').find('.child-trigger').removeClass('child-open');
$(this).parent().siblings('.hs-item-has-children').find('.hs-menu-children-wrapper').slideUp(250);
$(this).next('.hs-menu-children-wrapper').slideToggle(250);
$(this).next('.hs-menu-children-wrapper').children('.hs-item-has-children').find('.hs-menu-children-wrapper').slideUp(250);
$(this).next('.hs-menu-children-wrapper').children('.hs-item-has-children').find('.child-trigger').removeClass('child-open');
$(this).toggleClass('child-open');
return false;
});




});



Hope this helps!


If we were able to answer your query, kindly help the community by marking it as a solution.

Thanks and Regards.

0 Upvotes
SBruno
Member

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?

Here is the link for the website.
https://app.hubspot.com/content/5258553/edit/48597179033/content

Thank you,
* Sasha Bruno*
* IT Team*


*"Let's work together to make something better."*
0 Upvotes
Anton
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

How to make header menu "hamburger" style in mobile view

Hi @SBruno

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.

The CSS could look like this:

 

@media screen and (min-width:481px){
.mobile{
display:none;
}
.desktop{
display:block;
}
}
@media screen and (max-width:480px){
.mobile{
display:block;
}
.desktop{
display:none;}
}

 

The source code(very quickly written) could look something like this:

<div class="mobile header-wrapper">
<div class="logo">{{logo}}</div>
<div class="cta-button">{# place CTA Widget here #}</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>

 

You'll need to write some styling and the "click/open" logic and that's it. 

The easiest logic would be

$('.mobile-trigger').click('.mobile-menu-wrapper').slideToggle()

 

Hope this helps, 

 

best, 

Anton 

Anton Bujanowski Signature
SBruno
Member

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):

https://app.hubspot.com/content/5258553/edit/50279129712/settings

 

Thank you!

0 Upvotes
Anton
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

How to make header menu "hamburger" style in mobile view

Hi @SBruno

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 #};
}

 

 

best, 

Anton

Anton Bujanowski Signature
0 Upvotes
SBruno
Member

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.

Thank you,

* Sasha Bruno*
* IT Team*


*"Let's work together to make something better."*
0 Upvotes