Toggle Navigation Bars in Mobile browser

Before Started:

You should have knowledge about making horizontal navigation bar in bootstrap

Used:

Bootstrap 4

Result:

Explain:

In Left image only the toggle icon displayed but when we press the toogle icon then all menu displayed like the right image

Question:

How to make this toggle navigation bars … ?

Answer:

We need 2 steps, namely:

  • Provide toggle-icon image
  • Create HTML file

Provided toogle-icon

Download or create toggle icon and named it with drawer.png and also put it in same folder as HTML file

Create HTML File

Create toogle_navigation_bars.html and insert this code below:

<nav class="navbar navbar-expand-md">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon" style="background-image:url(drawer.png)"></span>
  </button>
   <div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
  <li class="nav-item">
    <a class="nav-link" href="#">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Produk</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Servis</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Contact US</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">About US</a>
  </li>
</ul>
</div>
</nav>

Explain:

  • navbar-expand-md, this code mean this navbar expand on middle screen
  • button navbar-toggler class is used to make toggle button
  • div with collapse class is used to make make navbar collapse or expand

Thanks for reading

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *