Navigation Menu Bunched up

[DHayward3]

Hi,

I am having problems with my Navigation menu for my website.

I have added a ‘Menu’ module to my global content header. However, the styling for menu that I have created is way off and nothing seems to fix it. All the menu title are grouped together. How do I change this? Please see a screen grab of the menu on the webpage.

Thanks in advance!

[Jigar_Thakker]

@DHayward3

To fix the styling of the Navigation menu recheck with your developer whether your module code is correct or not, you can customize your sitemap in HubSpot by creating a new menu or cloning an existing one and adding pages to it.

You can also add child pages for a dropdown. After making changes, click Publish to save : Set up site navigation menus

Let me know if you have any follow-up questions.
If my post was helpful in addressing your query, Support the community by indicating it as the solution.

[DHayward3]

Hi Jigar,

Thanks for your reply. The theme I used is one of HubSpot’s defaults. I created a menu from scratch but regardless of the theme that I use it just appears as in the image in the original post

[Jigar_Thakker]

@DHayward3

Have you tried reaching out to HubSpot support regarding this?

[Rokib31]

How to clone a navigation menu with style?

[Bna9]

Dunkin Donuts Menu serves Classic Donuts, Premium Donuts, Munchkins Bucket, Hot and Cold Beverages, Poppins Tea, Kiddie Pearl, Combos, Bunwich & Croissant, and Waffles.

[GKitua]

I am experiencing the same problem. Was this resolved?

[Rokib31]

the navigation menu is not showing, if I create a new menu and add it to the global header style it is very odd and not useable.

[SGeek4]

Issue at your end resolved? I am facing the same issue on my menu site .

[starbuck]

Hi there,

It sounds like your navigation menu is as bunched up as a crowded Starbucks during the morning rush! Let’s help you untangle it.

Here are a few steps to troubleshoot:

1. Check Your CSS Styling:
   Just like Starbucks carefully arranges its menu items, your navigation menu needs proper spacing and alignment. Inspect your CSS to ensure there’s no conflicting styling or missing padding/margin properties.
2. Review the Module Settings:
   Think of your ‘Menu’ module as a Starbucks drink—sometimes, it needs a little tweaking to get it just right. Double-check the module settings to ensure the layout and spacing options are configured correctly.
3. Inspect for Overlapping Elements:
   If your menu titles are grouped together, it could be due to overlapping elements. Use your browser’s developer tools (right-click > Inspect) to identify any issues.
4. Test Responsive Design:
   Just like Starbucks ensures its menu looks great on both mobile and desktop, make sure your navigation menu is responsive. Test it on different screen sizes to see if the issue persists.

If you’re still stuck, feel free to share more details or the screen grab, and we’ll help you get your menu looking as smooth as a perfectly brewed latte!

[Benztacker]

To fix the Navigation Menu bunched up issue, check the CSS for spacing, padding, and flex properties in your global content header. Using display: flex; or justify-content: space-between; might help distribute the menu items properly. Also, while troubleshooting, consider how you create engaging content—a well-structured, user-friendly menu enhances the overall user experience!