Different Sub Menu Designs in the same menu - Pro Header Nav Bar

[duncmoran]

Hi, We are trying to replicate the boteboard.com menu for the boteboard.com.au website and need to replicate the different sub menu design (In header Pro Builder) for the products menu. Can you please provide support as to how to achieve this. I will add a secure note with our login details.

Thank you

[friech]

Hi @morelly,

Thank you for writing in, to do that, please separate the Products menu item from the main menu. Then add a Navigation Dropdown only for Product menu, then add the custom CSS below to the Navigation Dropdown’s Element CSS area to make the menu inline.

$el .x-dropdown {
  display: inline-flex;
}

Hope it helps,
Cheers!

[duncmoran]

Thanks I will try this, then get back to you to report on its success or failure. The only thing this solution won’t fix though is the menu on the smaller breakpoints. given they are in modals, how can I achieve the same result for mobile etc. Can you explain how I can make the menu size responsive so it adjusts the font and spacing to fit everything on any screen size (so I don’t have to build multiple break-point versions of the header) please?

[duncmoran]

Please review. This hasn’t worked at all. I now have a drop down symbol instead of ‘product’ in my navline, it won’t work with breakpoints properly (I will end up with two menus), and the css doesn’t display the layout of the menu correctly. Please confer with your colleagues to see if you can provide a solution that fits our brief. We are trying to replicate the boteboard.com menu exactly (for all breakpoints). Please advise. Thank you.

[rad]

Hi @morelly,

It’s actually working, just too narrow. Instead, please follow this

Please inspect the container where the menu is, and add this CSS to it’s Element CSS

$el.x-bar-container, $el.x-bar-container  .x-mod-container {
position: static;
}

Then change the above CSS to this

$el .x-dropdown {
    display: inline-flex;
    width: 100vw;
}

It’s not breakpoint related, but if it’s required then it’s only doable with custom development.

Thanks!

[duncmoran]

Hi, thanks, the approach advised isn’t going to work for our setup. We will look to use Uber Menu. Thanks for your support.

[paul.r]

You’re welcome!