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

Popular posts from this blog

c# - How to get the current UAC mode -

postgresql - Lazarus + Postgres: incomplete startup packet -

javascript - Ajax jqXHR.status==0 fix error -