Horizontal drop-down nav with Bootstrap addon

[dansmartmenus]

Hi,

I notice the default SmartMenus implementation outputs horizontal top level and secondary level nav.

However, using the Bootstrap addon, the top level is horizontal and sub-nav is vertical. How would I change this behaviour so that the sub-nav is horizontal? Obviously I could implement custom CSS for this, but looking at the mark-up it seems a lot of the styles are dynamically added inline so I’d need a bunch of ‘!important’ statements in there to affect it.

Is there a setting or simple/standard way to get this behaviour?

[admin]

Hmm, which default implementation are you referring to? All default demos feature a horizontal main menu with vertical sub menus just like the Bootstrap addon demos.

As for horizontal sub menus with Bootstrap, this is not possible by default. You can try searching the web for some custom Bootstrap demos with horizontal sub menus though I am not sure if such exist.

[dansmartmenus]

Thanks. Perhaps my bad suggesting that the default sub-menu is horizontal as I can’t find those examples now (definitely had them yesterday, I promise 🙂 ). Anyhow, I came to the conclusion that custom is the only way, so I implemented a quick proof-of-concept yesterday. It completely doesn’t work when in ‘mobile’ mode just yet, but the desktop CSS was dead straight forward – something along the lines of:

.dropdown-menu {
	left: 0!important;
	right: 0!important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
}

Again, this is just a proof-of-concept and not tested very widely at all but perhaps it might be a useful starting place if anyone else has this question in future.

Thanks again. 🙂

[Author]

Posts