Bootstrap addon carets dissapear when i center nav

Home Forums Older releases 1.0.x + Bootstrap addon Bootstrap addon carets dissapear when i center nav

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #3173
    clarkito
    Participant

    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;
    	}
    }
    
    #3174
    clarkito
    Participant

    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

    #3175
    clarkito
    Participant

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

    please help…

    #3177
    clarkito
    Participant

    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;
      }
    
    }
    
    #3321
    noobiemania
    Participant

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

    #3357
    admin
    Keymaster

    @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';
    };
Viewing 6 posts - 1 through 6 (of 6 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?