Multilevel Menu width

[bsitko]

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.

[admin]

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.

[bsitko]

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.

[bsitko]

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);

[Author]

Posts