Bootstrap addon carets dissapear when i center nav

[clarkito]

im trying to center the nav,

when i try to set the .navbar-nav > li to float:none;
the carets dissappear..

using an example like this but trying to integrate with the smartmenu bootstrap addon
http://www.bootply.com/CSI2KcCoEM

@media (min-width: 768px){
	.navbar-nav{
		width:100%;
		text-align:center;		
	}
	.navbar-nav > li{
 		float:none;
		display:inline-block;
	}

	.navbar-nav > li.navbar-right{
		float:right !important;
	}
}

[clarkito]

i found the answer! if anyone has problem with carets disappearing when centering the nav. reading up on previous posts, @vadikom suggested updating somewhere

in jquery.smartmenus.bootstrap.js

// custom "isCollapsible" method for Bootstrap

obj.isCollapsible = function() {
	return !/^(left|right)$/.test(this.$firstLink.parent().css('float'));
};

where it says (left|right)
change to (left|right|none)

then the carets show when content of bootstrap smartmenu is centered too

[clarkito]

actually doing the above fixes the problem for large screen but messes the mobile view menus up…

please help…

[clarkito]

SOLUTION:

DONT ADJUST ANYTHING. smartmenus is awesome for infinite submenus drilldown!!

@media (min-width: 768px) {
  .navbar .navbar-nav {
    display: inline-block;
    float:none;
  }

  .navbar .navbar-collapse{
  	text-align: center;
  }

}

[noobiemania]

Unfortunately this does not work properly if the menu has sub menus.
Can the support advice on this?

[admin]

@noobiemania The problem happens when float: none; is applied for the .navbar-nav > li elements – it breaks the following method in “jquery.smartmenus.bootstrap.js”:

// custom "isCollapsible" method for Bootstrap
obj.isCollapsible = function() {
	return !/^(left|right)$/.test(this.$firstLink.parent().css('float'));
};

So if you are using something like this to center the items:

@media (min-width: 768px) {
  .navbar-nav {
    width: 100%;
    text-align: center;
  }
  .navbar-nav > li {
    float: none;
    display: inline-block;
  }
}

to avoid the issue you will need to change the method in “jquery.smartmenus.bootstrap.js” to something like this:

// custom "isCollapsible" method for Bootstrap
obj.isCollapsible = function() {
	return this.$firstLink.parent().css('display') == 'block';
};

[Author]

Posts