Split Menu and Logo
A logo with menus on the left and right side of it.
View a live demo of this module.
Content
- By default, the module pulls in your portal logo, but this can be overridden
- Add links for left navigation and right navigation using simple menus
- Add a menu label that is used to include a screen reader accessible descriptive role
Styles
- Change the font family, size, weight, color, hover color, line height, and letter spacing of the main menu links and child links
- Force uppercase on the menu links and child links
How to Use This Module
The Split Menu and Logo module is designed for websites that need prominent navigation while maintaining a clean, professional header layout. This module works exceptionally well on homepage templates, landing pages, and product showcase pages where you want to balance branding with easy access to key navigation items.
When you drag this module into the HubSpot page editor, you’ll find it most effective in header sections or at the top of page layouts. The split design creates visual hierarchy by placing your logo as the central focal point, with supporting navigation elements flanking it on both sides. This arrangement works particularly well for e-commerce sites using the Traverse theme, as you can dedicate one menu side to product categories and the other to utility links like account access or support.
To set up your menus effectively, create simple menus in your HubSpot settings rather than advanced menus with complex dropdowns. The left navigation typically works best for primary content areas or main product categories, while the right navigation is ideal for secondary actions like “Login,” “Cart,” or “Contact Us.”
The module’s responsive behavior automatically stacks menu items vertically on mobile devices, so consider limiting each side to 3-4 menu items for optimal mobile experience. If you’re overriding the default portal logo, ensure your replacement image maintains appropriate dimensions to prevent layout shifts.
For accessibility compliance, always configure the menu label field with descriptive text like “Main site navigation” or “Product menu.” This helps screen readers understand the navigation structure and improves your site’s overall usability score in HubSpot’s SEO recommendations.