CMS Development

JNeukom
Member

Mobile Dropdown menu links not working

SOLVE

Hey, all --

 

I'm working on a page built by a coworker who is no longer at the company. The page is for an upcoming event, so it has a secondary nav bar where you can choose agenda, speakers, etc.

 

The bar changes to a dropdown on mobile, but the links in each item do not work on mobile devices. I also noticed the menu switches to the default (in my case) iPhone dropdown menu styling, instead of the style specified in the CSS.

 

I'm new to Hubspot, so I'm having a bit of trouble determining where to start troubleshooting. I tried finding similar posts to see if anyone else had this issue.

 

Here is the page in question: https://www.cartegraph.com/conference

 

The menu is located under the banner image.

1 Accepted solution
Jnix284
Solution
Hall of Famer

Mobile Dropdown menu links not working

SOLVE

@JNeukom switching to the dropdown on mobile is normal (better UX), and using the menu styling from the browser is expected - it's very difficult to overwrite this default dropdown style and your CSS is likely not compatible with the browser.


If my reply answered your question please mark it as a solution to make it easier for others to find.


Jennifer Nixon

View solution in original post

0 Upvotes
3 Replies 3
JMike
Member

Mobile Dropdown menu links not working

SOLVE

When troubleshooting issues with the mobile navigation of a page built on HubSpot, it's important to follow a systematic approach. Start by inspecting the code using your browser's developer tools to examine the HTML, CSS, and JavaScript. Look for any errors or inconsistencies that could be causing the navigation links to not work on mobile devices or the styling to be overridden. Check the JavaScript console for any relevant errors that may be affecting the mobile navigation functionality. Additionally, review the CSS styles to ensure that they are correctly applied and that there are no conflicting styles or overrides causing the default iPhone dropdown menu styling to take precedence.

If the navigation menu is implemented using HubSpot modules or custom code, examine the settings and configurations of those modules to ensure they are properly set up for mobile devices. It's also important to check for any custom code or integrations on the page and review them for potential conflicts or issues related to the mobile navigation. Make sure any JavaScript libraries or plugins used for the dropdown functionality are integrated correctly and compatible with HubSpot.

When troubleshooting in HubSpot, it can be helpful to consult their knowledge base, community forums, and support documentation. Search for similar issues or specific recommendations related to mobile navigation. If you are unable to resolve the issue through troubleshooting or find a solution through available resources, don't hesitate to reach out to HubSpot support for further assistance. They can provide personalized guidance and help you address the problem effectively.

0 Upvotes
Jnix284
Solution
Hall of Famer

Mobile Dropdown menu links not working

SOLVE

@JNeukom switching to the dropdown on mobile is normal (better UX), and using the menu styling from the browser is expected - it's very difficult to overwrite this default dropdown style and your CSS is likely not compatible with the browser.


If my reply answered your question please mark it as a solution to make it easier for others to find.


Jennifer Nixon
0 Upvotes
Jaycee_Lewis
Community Manager
Community Manager

Mobile Dropdown menu links not working

SOLVE

Hi, @JNeukom 👋 Thanks for being brave and jumping into a challenging situation 🙌

 

Hey, @Mark_Ryba @BarryGrennan @alyssamwilie, can you offer any eyes or wisdom on where @JNeukom might start troubleshooting their misbehaving mobile menu?

 

Thank you for taking a look! — Jaycee

linkedin

Jaycee Lewis

Developer Community Manager

Community | HubSpot