css - bootstrap 3 - collapse menu earlier -
trying figure out how can collapse menu earlier? there easy way in bootstrap 3?
the problem code atm, opens, , closes automatic? don't understand why happening.
@media (max-width: 970px) { .navbar-header { float: none; } .navbar-toggle { display: block; } .navbar-collapse { border-top: 1px solid transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); } .navbar-collapse.collapse { display: none!important; } .navbar-nav { float: none!important; margin: 7.5px -15px; } .navbar-nav>li { float: none; } .navbar-nav>li>a { padding-top: 10px; padding-bottom: 10px; } }
html:
<div class="top_menu_wrap"> <div class="navbar-header navbar-right"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse navbar-right"> <ul id="menu-menu-1" class="nav navbar-nav"> <li id="menu-item-4" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-4 active"><a title="forsiden" href="http://localhost/wpdev/">forsiden</a></li> <li id="menu-item-75" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-75 dropdown"> <a title="om oss" href="#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">om oss <span class="caret"></span></a> <ul role="menu" class=" dropdown-menu"> <li id="menu-item-22" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-22"><a title="om oss" href="http://localhost/wpdev/om-oss/">om oss</a></li> <li id="menu-item-64" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-64"><a title="vår trening" href="http://localhost/wpdev/var-trening/">vår trening</a></li> <li id="menu-item-76" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-76"><a title="våre ansatte" href="http://localhost/wpdev/vare-ansatte-2/">våre ansatte</a></li> <li id="menu-item-82" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-82"><a title="priser" href="http://localhost/wpdev/priser/">priser</a></li> </ul> </li> <li id="menu-item-51" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-51"><a title="timeplan" href="http://localhost/wpdev/timeplan/">timeplan</a></li> <li id="menu-item-63" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-63"><a title="timebeskrivelse" href="http://localhost/wpdev/timebeskrivelse/">timebeskrivelse</a></li> <li id="menu-item-74" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-74"><a title="bli medlem" href="http://localhost/wpdev/bli-medlem/">bli medlem</a></li> </ul> </div> </div>
if understand question, u have adjust media-query. set max-width e.g. 500px collapse menu if view bigger 500px ...
hope helps ...
Comments
Post a Comment