Navigation Hamburger Menu on Mobile is Missing

[sam_sottosanto]

Hi,

I was wondering if anyone had any insight on where I needed to go or which .css or .html files I needed to find in order to fix my navigation hamburger menu. 

After changing some fonts and colors for our website design, I somehow lost the navigation hamburger menu on mobile. Which .css or .html file would this be under? Would it be in the @media section? Any help appreciated. Thank you!

Sam

[Mike_Eastwood]

Nice work Sam,

Remember, when each of the modules loads CSS they all count as a file load and will slow down your page.

Once I've finished my Module development I move my CSS to the Theme Overrides file (leaving the Module CSS file empty) to reduce the number of files loaded. Which helps Page Speed.

Brace yourself before putting your URL into Page Speed Insights (https://pagespeed.web.dev/) it's brutal.

Have fun

Mike

[Mike_Eastwood]

Hi Sam

Depends which theme and which menu you are using... can you share a link to your site?

Mike

p.s. have you played with https://responsively.app/? it's a great tool for front end development because you can see lots of different screen sizes at once

[sam_sottosanto]

Thank you so much, Mike! To give you a little more detail, I was able to change out some fonts and colors on our site and feel like I maybe accidentally removed code under fonts that said FontAwesome5Free, mistakenly thinking it was a font. I later realized perhaps these were icons that showed our hamburger menu. 

The menu is working fine itself, it is just invisible right now. If you click in the right corner on mobile, even though there is no icon, the menu still displays. I just have somehow lost the hamburger menu icon, and not sure what I did!

We are using a customized theme that Hubspot created for us to match our website design. Files include:

CSS

_default-modules.css

_footer.css

_header.css

_buttons.css

_forms.css

_tables.css

_typography.css

_normalize.css

_reset.css

_containers-dnd.css

_layout.css

_system.css

fallback.css

main.css

theme-overrides.css

MODULES

banner

menu-section

social-follow

customizable-button

HTML

base.html

footer-no-navigation.html

footer.html

header-no-navigation.html

header.html

website-page.html

My best guess - it may be in the banner module, or the themes-override.css, because I was working on those files most recently, but I'm at a loss. 

Also, do you happen to know which type of code snippet would be responsible for showing a hamburger menu? 

Also, here's a section in the themes-override.css, that I'm thinking where the problem might lie? 

Any help is appreciated, and I am super thankful for you taking the time to help me and read this post. Thank you thank you thank you!!

-Sam

[sam_sottosanto]

After more poking around, I was able to fix the issue! It looks like the FontAwesome5Free was the issue. I had accidentally replaced our new font with it, when FontAwesome5Free was actually the icon and not a font! I fixed this in the header.css.

Crossing my fingers that this is it & it does not cause any other accidental issues.

Thank you!

Sam