Start a new discussion

To start a new discussion please visit the discussions section of the GitHub home page of the project.

Discussions on GitHub

You can also search our old self-hosted forums for any useful information below but please note that posting new content here is not possible any more.

Horizontal drop-down nav with Bootstrap addon

Home Forums Older releases 1.0.x + Bootstrap addon Horizontal drop-down nav with Bootstrap addon

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #2579
    dansmartmenus
    Participant

    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?

    #2581
    admin
    Keymaster

    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.

    #2582
    dansmartmenus
    Participant

    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. 🙂

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘1.0.x + Bootstrap addon’ is closed to new topics and replies.