Toggle Navigation bar bootstrap left to right

Question

I need navigation bar like shown in image. toggle on right to left with close button. i have tried everything and search everywhere nothing helped. thanks in advance. https://i.stack.imgur.com/1h6an.jpg

i just search every where with keywords like collapse navbar, toggle nav bar.. i am fresher in bootstrap — Coder, Jul 18 '18 at 08:01
did you see this https://getbootstrap.com/docs/4.1/examples/pricing/ — Nandita Sharma, Jul 18 '18 at 08:03
use navbar expand and on open change icon to close icon:https://stackoverflow.com/questions/38970267/bootstrap-4-collapse-show-state-with-font-awesome-icon — לבני מלכה, Jul 18 '18 at 08:06
its not i am searching for please see this for reference https://imgur.com/a/mC94rrZ — Coder, Jul 18 '18 at 08:13

Nandita Sharma · Accepted Answer · 2018-07-18T09:46:45.637

0

Use a navbar like this

$(document).on("click", "#hide-navbar, #show-navbar", function() {
  $("#navbarsExample04").toggleClass("d-none");
  $("#hide-navbar").toggleClass("d-none");
  $("#show-navbar").toggleClass("d-none");
})

.navbar-collapse.collapse.d-none,
#hide-navbar.d-none,
#show-navbar.d-none {
  display: none !important;
}

.navbar-expand #show-navbar.navbar-toggler {
  display: block;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
<script src="https://use.fontawesome.com/eed659c9d4.js"></script>

<nav class="navbar navbar-expand bg-transparent">
  <a class="navbar-brand" href="#"><img src="https://picsum.photos/50/30"> ABC</a>


  <div class="navbar-collapse collapse" id="navbarsExample04" style="">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>

    </ul>

  </div>
  <button class="navbar-toggler d-block ml-auto" type="button" id="hide-navbar">
    <span class="fa fa-times"></span>
  </button>
  <button class="navbar-toggler d-none ml-auto" type="button" id="show-navbar">
    <span class="fa fa-bars"></span>
  </button>
</nav>

edited Jul 18 '18 at 09:46

answered Jul 18 '18 at 08:09

Nandita Sharma

13,287
2
22
35

I need like this https://imgur.com/a/mC94rrZ ... toggle from left to right with transparent background – Coder Jul 18 '18 at 08:12
You should try and figure out somethings yourself :) if you dont find an answer let me know will tell you – Nandita Sharma Jul 18 '18 at 08:13
I am fresher in bootstrap so not able to figure out something.. i M stuck – Coder Jul 18 '18 at 08:15
Updated the answer, but do some research before posting a ques. If you are new to bootstrap then read the documentation first then start working on it – Nandita Sharma Jul 18 '18 at 08:21
your answer is good but just need horizontal its vertical. – Coder Jul 18 '18 at 08:24
Check the updated answer now – Nandita Sharma Jul 18 '18 at 09:46
awesome.. .thank you so much – Coder Jul 19 '18 at 04:48
i need two more things on this.. first it closed by default and second it should slide out and slide in.. what should i do for this. – Coder Jul 19 '18 at 04:48
Please add another question if you have any further queries – Nandita Sharma Jul 19 '18 at 04:50
okay i will add – Coder Jul 19 '18 at 04:54

Toggle Navigation bar bootstrap left to right

1 Answers1