Vertically aligning navigation stops dropdowns working

[suzyb]

I’ve inherited another project that uses this and am having more trouble getting the menu to work properly. I need to vertically align the items (a couple have multi lines of text) and am using display: table-cell to do so. As soon as I remove the float from the li however the menu stops working.

This is my li style.

.navbar-default .navbar-nav > li {
    float: none;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

I’ve read a few posts that seem to suggest this should work so I’m not sure why it isn’t. Can anyone help?

[admin]

That’s because the Bootstrap addon depends on the default Bootstrap’s float: left/right declaration for the LI elements to detect when the menu tree is in collapsible mode. So you will need to modify the following code in “jquery.smartmenus.bootstrap.js”:

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

like this:

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

And also make sure your CSS only affects desktop view:

@media (min-width: 768px) {
	.navbar-default .navbar-nav > li {
		float: none;
		display: table-cell;
		vertical-align: middle;
		text-align: center;
	}
}

[suzyb]

That’s awesome, thanks so much.

[Sherrill85]

Sometime, Its hard to do the trading on daily basis and if you lose the game then you would be erm papers online which is cheap and very economical on student’s pocket though

[quanlynhahang]

That’s awesome, thanks so much

[Author]

Posts