Multilevel Menu width

Home Forums Older releases 0.9.x Multilevel Menu width

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1416
    bsitko
    Participant

    I’m trying to get a drop down to multimenu in bootstrap go wider than the auto it keeps trying to set. I’d like to fill one of the multi-levels with a larger dataset of links but can’t get the width to expand to fill the content. Help.

    #1778
    admin
    Keymaster

    Hi, you will need to override the default options which are:

    subMenusMinWidth: '10em',	// min-width for the sub menus (any CSS unit) - if set, the fixed width set in CSS will be ignored
    subMenusMaxWidth: '20em',	// max-width for the sub menus (any CSS unit) - if set, the fixed width set in CSS will be ignored

    To do this, you need to edit the following in “jquery.smartmenus.bootstrap.js”:

    		$this.addClass('sm').smartmenus({
    
    						// these are some good default options that should work for all
    						// you can, of course, tweak these as you like
    						subMenusSubOffsetX: 2,
    						subMenusSubOffsetY: -6,
    						subIndicatorsPos: 'append',
    						subIndicatorsText: '...',
    						collapsibleShowFunction: null,
    						collapsibleHideFunction: null,
    						rightToLeftSubMenus: $this.hasClass('navbar-right'),
    						bottomToTopSubMenus: $this.closest('.navbar').hasClass('navbar-fixed-bottom')
    		})

    and pass the subMenusMaxWidth option with a desired value (could be even '' if you don’t want any max-width constraint):

    		$this.addClass('sm').smartmenus({
    
    						subMenusMaxWidth: '30em',
    						// these are some good default options that should work for all
    						// you can, of course, tweak these as you like
    						subMenusSubOffsetX: 2,
    						subMenusSubOffsetY: -6,
    						subIndicatorsPos: 'append',
    						subIndicatorsText: '...',
    						collapsibleShowFunction: null,
    						collapsibleHideFunction: null,
    						rightToLeftSubMenus: $this.hasClass('navbar-right'),
    						bottomToTopSubMenus: $this.closest('.navbar').hasClass('navbar-fixed-bottom')
    		})

    Let me know if you still have any troubles.

    #1788
    bsitko
    Participant

    Sorry but that didn’t work. Here’s what I’m trying to do:

    http://marylandmanagement.com/index-new.php

    Mouseover Our Communities and mouseover Baltimore. You’ll see the multilevel dropdown is no where near wide enough. It keeps overriding my css with width auto.

    #1789
    bsitko
    Participant

    Got it! Remove the width from this section of the smartmenus.js code.

    this.opts.subMenusMaxWidth)&&(t.css({width:””,minWidth:”10em”,maxWidth:”40em”}).addClass(“sm-nowrap”)

    Then add this css to your code:

    #main-menu .navbar-nav ul ul {width:40em);

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.

Register

You will be emailed a link to set your password.

Login

Lost password?