html - Making Bootstrap's navbar appearing in different position on desktop/mobile -


i want make bootstrap's navbar appear @ top on desktop view , @ bottom on mobile view. possible? how can it?

there actual html top navbar:

<nav class="navbar navbar-inverse navbar-fixed-top">   <div class="container">     <div class="navbar-header">       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">         <span class="icon-bar"></span>         <span class="icon-bar"></span>         <span class="icon-bar"></span>       </button>       <a class="navbar-brand" href="#"><span class="fa fa-cloud-upload fa-fw"></span>&nbsp; gitup</a>     </div>     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">       <ul class="nav navbar-nav navbar-right">         <li><a href="index.html"><span class="fa fa-arrow-left fa-fw"></span>&nbsp; selección de idioma</a></li>         <li class="dropdown">           <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">             <code><span class="fa fa-code"></span></code> por federico damián <span class="fa fa-caret-down"></span>           </a>           <ul class="dropdown-menu">             <li><a href="https://feskyde.github.io"><span class="fa fa-home fa-fw"></span>&nbsp; <strike>mi casa</strike></a></li>             <li class="dropdown-header">contacto</li>             <li><a href="https://github.com/feskyde"><span class="fa fa-github fa-fw"></span>&nbsp; github</a></li>             <li><a href="https://twitter.com/feskyde"><span class="fa fa-twitter fa-fw"></span>&nbsp; twitter</a></li>             <li><a href="https://facebook.com/fedeedamianschonborn2"><span class="fa fa-facebook-official fa-fw"></span>&nbsp; facebook</a></li>             <li><a href="https://plus.google.com/116581300175876868268"><span class="fa fa-google-plus-square fa-fw"></span>&nbsp; google+</a></li>             <li class="dropdown-header">mis proyectos</li>             <li><a href="https://feskyde.github.io/gitup"><span class="fa fa-cloud-upload fa-fw"></span>&nbsp; gitup</a></li>             <li><a href="https://feskyde.github.io/ashblock"><span class="fa fa-shield fa-fw"></span>&nbsp; shell blocker</a></li>             <li><a href="https://feskyde.github.io/rosespine"><span class="fa fa-arrow-circle-down fa-fw"></span>&nbsp; rosespine</a></li>             <li><a href="https://feskyde.github.io/kawaiicode"><span class="fa fa-code fa-fw"></span>&nbsp; kawaiicode</a></li>             <li class="dropdown-header">otros</li>             <li><a href="https://getbootstrap.com"><span class="fa fa-file-code-o fa-fw"></span>&nbsp; bootstrap</a></li>             <li><a href="https://fortawesome.github.io/font-awesome/"><span class="fa fa-fort-awesome fa-fw"></span>&nbsp; font awesome</a></li>           </ul>         </li>       </ul>     </div>   </div> </nav> 

take off navbar-fixed-top class , add own css

.navbar-inverse {   position: fixed;   top:0;   left: 0;   width: 100%; } @media screen , (max-width: 767px){   .navbar-inverse{bottom: 0; top:auto;} } 

then @ max width 767px screens navbar fixed on bottom.


Comments

Popular posts from this blog

get url and add instance to a model with prefilled foreign key :django admin -

css - Make div keyboard-scrollable in jQuery Mobile? -

ruby on rails - Seeing duplicate requests handled with Unicorn -