Vertically aligning navigation stops dropdowns working

Home Forums Older releases 1.0.x + Bootstrap addon Vertically aligning navigation stops dropdowns working

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #3412
    suzyb
    Participant

    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?

    #3414
    admin
    Keymaster

    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;
    	}
    }
    #3417
    suzyb
    Participant

    That’s awesome, thanks so much.

Viewing 3 posts - 1 through 3 (of 3 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?