The hamburger menu, by default, uses the + icon to trigger the submenu to slide down. If you'd like the nav text label to trigger the slide down, here's how to do it.
SUPER DUPER Important:
Before you jump into this and start copy/pasting the needed CSS to get this working, it's important for you to know why ONLY the (+) icon is the slide-down trigger by default.
Basically, a top-level navigation item can also be linked to a page so that when it's clicked or tapped it will take the visitor to that page. It simply can't do two things at once.
Can you tap your head and rub your belly at the same time? Let's see. Give it a try.
Step 1: Check Your Advanced Menu
Open up the Advanced Menu feature via the Content Settings section of HubSpot and find the menu you're currently using in the Global Header.
Each menu item that contains a sub-menu or "child items" needs to be set to No link.
Step 2: Copy this CSS to your child.css file
Go to the Design Tools section of HubSpot which you can find under the Marketing Tab > Files and Templates.
Now, find the CHILD THEME you set up and are using. It will look something like this but perhaps not with the CSS, JS, and Modules folders like this example.
Open up the child.css file you see there.
Copy the following CSS to your clipboard:
{# MOBILE MENU CUSTOMIZATION #}
.hs-menu-wrapper.hs-menu-flow-vertical>ul li.hs-item-has-children {
position: relative;
}
.hhs-side-menu .hhs-sidebar-nav-toggle {
display: inline-block;
width: 100% !important;
position: absolute;
top: 0;
right: 0;
}
.hhs-side-menu .hhs-sidebar-nav-toggle i {
float: right;
width: 15px;
}
{# END #}
Now, simply paste that into the child.css file and click Publish Changes.
That's it. You're done!
Test the menu on a mobile device to make sure it's working. This might require a few refreshes in order to clear HubSpot's cache.
That wasn't so difficult now, was it?
