javascript - Hide bootstrap navbar on mobile and show a button instead to show the collapsed navbar dropdown -

-

i use bootstrap navbar, , collapses fine on small screens, shows navbar-toggle , dropdown menu if click on navbar-toggle. standard behavior.

i want, however, hide entire navbar ribbon on small screens , show button on top middle part of screen. when click on button, should open dropdown navbar. html:

<div class="navbar-show">     <button type="button" class="navbar-toggle" onclick="document.getelementbyid('toggle-button').click();">         <img height="50px" width="50px" src="img/logo3.gif">     </button> </div>  <nav class="navbar navbar-default" data-ng-controller="globalauthctrl">    <div class="container-fluid">     <div class="navbar-header">       <button type="button" class="navbar-toggle" id="toggle-button" data-toggle="collapse" data-target="#mynavbar">         <span class="icon-bar"></span>         <span class="icon-bar"></span>         <span class="icon-bar"></span>        </button>       <a class="navbar-brand" href="http://gliderforecast.com"><img height="50px" width="48px" src="img/logo3.gif"></a>     </div>     <div class="collapse navbar-collapse" id="mynavbar">       <ul class="nav navbar-nav">

my css:

@media (max-width: 767px) {      .navbar{         display:none;     }     .navbar-show {         display: block !important;     } } .navbar-show {     display: none;     position: fixed;     z-index: 10;     top: 0px;     left: 50%; }

it shows regular navbar on large screens, hides navbar , shows button on small screens, cannot show collapsed navbar dropdown when click on button. please guide me in right direction. different approach fine, have required functionality. jquery not preferred, (i using angularjs) can use too.

you can delete #toggle-button part. , try:

<div class="navbar-show">     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mynavbar">         <img height="50px" width="50px" src="img/logo3.gif">     </button>  </div>

bootstrap links it's js part through data- attributes here.


Comments

Post a Comment

Popular posts from this blog

java - Date formats difference between yyyy-MM-dd'T'HH:mm:ss and yyyy-MM-dd'T'HH:mm:ssXXX -

-
i trying parse date 2014-12-03t10:05:59.5646+08:00 using these 2 formats: yyyy-mm-dd't'hh:mm:ss yyyy-mm-dd't'hh:mm:ssxxx when parse using yyyy-mm-dd't'hh:mm:ss works fine, when parse yyyy-mm-dd't'hh:mm:ssxxx parseexception thrown. which correct format parse date , difference between these 2 formats? note : cannot use joda :( those valid formats: yyyy-mm-dd't'hh:mm:ss.sssz >>> e.g.: 2001-07-04t12:08:56.235-0700 yyyy-mm-dd't'hh:mm:ss.sssxxx >>> e.g.: 2001-07-04t12:08:56.235-07:00 edit: btw, "x" refer (iso 8601 time zone)
Read more

c# - Get rid of xmlns attribute when adding node to existing xml -

-
i have xml-file: <ns2:root xmlns:ns2="namespace"> <ns2:a> <ns2:b>some content</b> <ns2:c>some content</c> <ns2:d>some content</d> </a> </root> i need add new node in specific place, code is: var doc = xdocument.load(file); xnamespace ns2 = "namespace"; doc.element(ns2 + "root").element(ns2 + "a").element(ns2 + "c").addafterself( new xelement(ns2+"new", new xelement("new1", new xelement("new2","some content"), new xelement("new3", "some content")))); the output is: <ns2:root xmlns:ns2="namespace"> <ns2:a> <ns2:b>some content</b> <ns2:c>some content</c> <ns2:new> <new1 xmlns=""> <new2>some content</new2> ...
Read more