Display the Submenu in the Header Horizontally

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

1. In your WordPress admin, go to BuddyBoss > Theme Options
2. Under Custom Codes, toggle Enable CSS to On
3. 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;

}

4. Click Save Changes

Any custom code is considered “custom work.” Please review our Support Policy for more details.

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