Mobile Nav Menu with drop down Issues

[KayleeM]

I'm using the Vast theme and have run into an issue with making the nav responsive for mobile use while continuing to have drop down capabilities. I've tried many of the solutions in the HubSpot forums, but they ultimately don't function when I click to expand the menu. One of the forum posts in particular mentioned the Vast theme had mobile a mobile menu set up built in but does not function as intended. I would greatly appreciate assistance in how to make the existing capabilities work while having drop down abilities.

Here is a url to review the nav: 

https://aaisonline-6278108.hs-sites.com/aais-views-1?hs_preview=mwgYunjB-31972020738

[stefen · Accepted solution]

@KayleeM looks like it's because you have a fixed height on the header. One way you could fix this would be to position absolute the menu on mobile but you also have an overflow hidden so you would need to remove that in order for that to work or add another override like so:

.mobile-open #nav-header {
    overflow: visible;
}
.mobile-open .custom-menu-primary.js-enabled .hs-menu-wrapper {
    overflow: visible !important;
}

I'm also seeing two different mobile menu triggers now just one of them is hidden with CSS. Honestly, it would be easier to make a new custom module for your header to clean up the HTML. The drag and drop template editor is deprecated and it would be quicker to make a new header from scratch than to try and fix all the bugs in my opinion.

[jonchim · Accepted solution]

Hey @dennisedson the vast mobile menu that @KayleeM has on the website looks pretty spot on. what @Anton said about the menu being pushed down is true from what you can see here https://dev.moreycreative.com/

@KayleeM If you want to download the original files to take a peek here are the links. The vast-main.js seems to be a newer JS file compared to the current js file. Like Stefan had mentioned in the thread the CSS maybe off. 

https://dev.moreycreative.com/hubfs/files/vast-styles.css

https://dev.moreycreative.com/hubfs/files/vast-modules.css

https://dev.moreycreative.com/hubfs/files/vast-main.js

[KayleeM]

@stefen Thank you for the insights, they helped me get the nav out of the header but now it's a matter of getting it to be the responsive nav with drop downs I'm looking for. 

If you have more insights with the updates situation that would be greatly appreciated. If not @dennisedson I was wondering if perhaps since this is a HubSpot theme someone can point out where my CSS may be off from the original intended feature code?

Thank you!

Kaylee

[dennisedson]

Hey @KayleeM , this template has not been around for a bit.  I actually don't recall what it looks like 😬

You could clone the modules that you have adjusted (so you have a backup) and the revert the original modules to their original state.  I would focus on the Vast header.

@Anton , @jonchim do you all remember what that Vast mobile nav looked like?

[Anton]

@dennisedson it's been a while that I've worked with vast 🙂 After some search I could find a portal where I got vast unmodified 🙂

@KayleeM, the only difference(besides the look&feel) that I see between your page and the "default" vast is, that the original mobile menu "push" down the whole content when opened. Is this what you're looking for? 

best, 

Anton

[KayleeM]

Hello @dennisedson & @stefen!

I have re-activated the mobile menu for your review. 

When the Menu button is clicked, it doesn't expand the menu below the header. I also want to make sure the drop-down menus remain intact. Let me know if there are any further questions or instructions.

Thank you,

Kaylee

[stefen · Accepted solution]

@KayleeM looks like it's because you have a fixed height on the header. One way you could fix this would be to position absolute the menu on mobile but you also have an overflow hidden so you would need to remove that in order for that to work or add another override like so:

.mobile-open #nav-header {
    overflow: visible;
}
.mobile-open .custom-menu-primary.js-enabled .hs-menu-wrapper {
    overflow: visible !important;
}

I'm also seeing two different mobile menu triggers now just one of them is hidden with CSS. Honestly, it would be easier to make a new custom module for your header to clean up the HTML. The drag and drop template editor is deprecated and it would be quicker to make a new header from scratch than to try and fix all the bugs in my opinion.

[stefen]

Hey @KayleeM!

It looks like there are a couple issues in the stylesheet that are hiding more things on mobile than you are probably intending to. If you go to the stylesheet "vast-style.css" in the design manager you'll find on line 3446 a "display: none;" which needs to be removed. Then, you'll also need to go into the "Responsive Menu" module and find the display none on the mobile menu trigger on line 17.

That will get the menu and mobile trigger to show up on mobile but you will need some additional styles to position those properly alongside the rest of the header elements.

Hope that helps, feel free to reach out to our team if you need additional help we'd be happy to work with you: https://www.kelp.agency/contact

[dennisedson]

Hello @KayleeM 

Welcome to the Community!

The link you sent appears to not have the mobile menu active.  Do you have a screenshot or something to work with

@stefen  is an amazing developer and Community member and can probably help you out here if he has enough info 😀