Introduction
BuddyBoss does not provide a built-in option to display header submenu horizontally. You can use a CSS snippet to arrange submenu items in a horizontal layout, improving navigation and the visual structure of your site. Note that if a submenu has more than 4 items, this code may not display as expected.
Custom Workaround
- In your WordPress admin, go to BuddyBoss > Theme Options
- Under Custom Codes, toggle Enable CSS to On
- Paste the following CSS:
.bb-template-v2 .site-header #primary-navbar .menu-item>.ab-submenu .bb-sub-menu .menu-item {
display: inline-flex;
}
.site-header #primary-navbar .primary-menu .menu-item>.ab-submenu .bb-sub-menu {
max-width: none;
}
.site-header #primary-navbar .primary-menu .menu-item>.ab-submenu {
left: -180px;
}- Click Save Changes
Troubleshooting and FAQs
Q: The submenu is still vertical, what should I check?
A: Clear your site cache, caching plugin, or CDN cache. Ensure the CSS was pasted exactly as shown and that Enable CSS was turned on before saving
Q: Can I adjust the spacing between submenu items?
A: Yes. You can add additional CSS such as margin-right: 15px; to .bb-sub-menu .menu-item
Q: Will this work for submenus with more than 4 items?
A: This CSS may not display correctly if there are more than 4 submenu items. Additional adjustments may be needed
Q: Who can I contact for further assistance?
A: Submit a support ticket through your BuddyBoss account dashboard for personalized help
