Bootstrap navbar slide from left

Question

i have to do a navbar what is slide from right, like in https://evernote.com/

Here is my code:

<nav class="navbar navbar-inverse" style="padding-top:20px;">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#" style="padding:0px;"><img src="img/logo.png"></a>
      </div>
      <div id="navbar" class="collapse navbar-collapse" style="text-align:center; width:490px; font-size:35px;position:absolute; top:-10px; right:0">
        <ul class="nav navbar-nav">
          <li class="passivx" style="padding-top:20px; padding-bottom:20px; padding-right:30px; text-align:right;"><button data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar" style="background-color:#3081c5; color:#fff; border:none;"><b>X</b></button></li>
          <li class="active" id="activelink" style="padding-top:97px; "><a href="#">FŐOLDAL</a></li>
          <li class="passiv" style="text-align:center;"><a href="#ref">REFERENCIÁK<img src="img/line.png" style="padding-top:20px; "></a></li>
          <li class="passiv"><a href="#rolunk">RÓLUNK<img src="img/line.png" style="padding-top:20px; "></a></li>
          <li class="passiv"><a href="#infokt">INFORMATIKAI OKTATÁS<img src="img/line.png" style="padding-top:20px; "></a></li>
          <li class="passiv"><a href="#szatr">SZAKMAI TRÉNINGEK<img src="img/line.png" style="padding-top:20px; "></a></li>
          <li class="passiv"><a href="#feszo" style="height:155px; padding-top:30px;">FELNŐTTKÉPZÉSI <br><br><br><br> SZOLGÁLTATÁSOK<img src="img/line.png" style="padding-top:20px; "></a></li>
          <li class="passiv"><a href="#dobedo">DOBEDU<img src="img/line.png" style="padding-top:20px; "></a></li>
          <li class="passiv" ><a href="#contact">KAPCSOLAT</a></li>
        </ul>
      </div><!--/.nav-collapse -->
    </div>
  </nav>

However, my menu appears from the top, and not from the right. How can I be able to let it appear from the right?

Possible duplicate of [Bootstrap - How to slide nav bar from left instead from top](http://stackoverflow.com/questions/31641352/bootstrap-how-to-slide-nav-bar-from-left-instead-from-top) — Hrvoje Golcic, Jun 08 '16 at 11:58

score 2 · Answer 1 · answered May 08 '15 at 08:15

2

To do what you want you can find a good Bootstrap extension here:

http://jasny.github.io/bootstrap/javascript/#offcanvas

answered May 08 '15 at 08:15

Stefano Vuerich

996
1
7
28

Bootstrap navbar slide from left

1 Answers1