Recommended WordPress Theme

Responsive Navigation Menu with Bootstrap

6 days ago by Tamas

The default Bootstrap navigation menu is ok, but it needs some extra work to make it look like a nice modern navigation.

With just a few lines of css code we can make it look really nice. The modification below will focus on changing the design of the dropdown menu and adding some animation to it.

https://www.youtube.com/watch?v=i9X1u6o_biE

For this tutorial I used the Bootstrap 5 navbar code below:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-expanded="false">
            Dropdown link
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

 

The edited version of the navbar html code is:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container-fluid">
          <a class="navbar-brand" href="#">
              <img src="assets/images/logo-dark.png" alt="">
          </a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarNavDropdown">
            <ul class="navbar-nav w-100">
              <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="#">Home</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Features</a>
              </li>
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-expanded="false">Pricing</a>
                <ul class="dropdown-menu animate slideDown" aria-labelledby="navbarDropdownMenuLink">
                    <li><a class="dropdown-item" href="#">Action</a></li>
                    <li><a class="dropdown-item" href="#">Another action</a></li>
                    <li><a class="dropdown-item" href="#">Something else here</a></li>
                    <li><a class="dropdown-item" href="#">Another action</a></li>
                    <li><a class="dropdown-item" href="#">Something else here</a></li>
                  </ul>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Blog</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Pages</a>
              </li>
              <li class="nav-item dropdown profile-dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-expanded="false">
                  My Profile
                </a>
                <ul class="dropdown-menu animate slideDown" aria-labelledby="navbarDropdownMenuLink">
                  <li><a class="dropdown-item" href="#">Action</a></li>
                  <li><a class="dropdown-item" href="#">Another action</a></li>
                  <li><a class="dropdown-item" href="#">Something else here</a></li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
      </nav>

I also created a style.css file and added it to my document with the following content.

ul.navbar-nav li.profile-dropdown {
  margin-left: auto;
  margin-right: 50px;
}
#navbarNavDropdown ul li ul.dropdown-menu {
  border-radius: 0;
  border-top-width: 3px;
  border-bottom-width: 0px;
  border-left-width: 0px;
  border-right-width: 0px;
  border-style: solid;
  border-color: #0087be;
  margin-top: 17px;
  -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
  box-shadow: 0 6px 12px rgba(0,0,0,.175);
  padding-top: 0;
  padding-bottom: 0;
}
#navbarNavDropdown ul li ul.dropdown-menu li {
  border-bottom: 1px solid #ccc;
}
#navbarNavDropdown ul li ul.dropdown-menu li a:hover {
  background-color: #0087be;
  color: #ffffff;
  transition: .4s;
}
#navbarNavDropdown ul li ul.dropdown-menu li a {
  font-size: 13px;
  padding-top: 8px;
  padding-bottom: 8px;
}
.animate {
  animation-duration: 0.6s;
  -webkit-animation-duration: 0.6s;
  animation-fill-mode: both;
  -webkit-animation-fill-mode: both;
}
@keyframes slideDown {
  0% {
    transform: scaleY(0);
  }
  100% {
    transform: scaleY(1);
  }
}
@-webkit-keyframes slideDown {
  0% {
    transform: scaleY(0);
  }
  100% {
    transform: scaleY(1);
  }
}
.slideDown {
  animation-name: slideDown;
  -webkit-animation-name: slideDown;
}

 

Hope you’ll find it useful. For a more detailed explanation, please watch the video.

 

 

 

SHARE:

Subscribe to our newsletter!

Get the latest tutorials and articles right into your inbox!


0 comment

LEAVE A REPLY

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