Bootstrap Responsive Navigation Menu with Scroll Effect

A lightweight jQuery plugin to create Bootstrap responsive navigation menu with cool scroll effect. It creates Bootstrap 4 native sticky navbar on the top of the page, then float the site logo on scroll and smoothly adjust it in navigation menu.

Plugin Overview

Plugin: Menu-efec-hover-scrolll
Author: Target Code
Licence: MIT Licence
Published: May 12, 2019
Repository: Fork on GitHub
Dependencies: jQuery 1.3.1 or Latest version and Bootstrap 4.1.3
File Type: zip archive (HTML, CSS & JavaScript )
Package Size: 284 KB

How to Create Bootstrap Responsive Navigation Menu

1. Load the jQuery and Bootstrap 4 framework into HTML document for creating navigation menu.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<!-- Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>

2. Also include the navigation menu‘s CSS and JS files.

<!-- Navigation Menu CSS -->
<link rel="stylesheet" href="css/style.css">

<!-- Navigation Menu JS -->
<script src="js/jquery.countdown.min.js"></script>
<script src="js/app.js"></script>

3. After adding all necessary assets, create basic markup structure for navigation menu.

 <nav id="efec-scroll" class="navbar navbar-expand-md bg-dark navbar-dark fixed-top bg-transparent">
    <!-- Brand -->

      <!-- Toggler/collapsibe Button -->
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
        <span class="navbar-toggler-icon"></span>
      </button>

      <!-- Navbar links -->
      <div class="collapse navbar-collapse justify-content-center" id="collapsibleNavbar">
        <ul id="ulone" class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link" href="#">HOME</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">ABOUT</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">PORFOLIO</a>
          </li> 
        </ul>

        <img src="logo.png" alt="" id="logo" class="" width="7%">

         <ul id="ultwu" class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link" href="#">BLOG</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">FORUN</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">CONTACT</a>
          </li> 
        </ul>
      </div> 
    </nav>

4. Finally, add the following mentioned attributes in your body tag to enable scrolling effect.

<body data-spy="scroll" data-target="#efec-scroll" data-offset="10">

5. To customize with CSS, update the following style classes.

nav.bg-transparent {
    background: transparent;
    transition: all .3s ease;
}

nav.navbar.navbar-expand-md.bg-dark.navbar-dark.fixed-top:hover{
	background: #171719a3!important;
}



nav ul{
	transition: all .6s ease;
}

nav ul li.nav-item a{
	color: #f1f1f1!important;
	font-family: 'Open Sans', sans-serif;
	transition: all .3s ease;
}

nav ul li.nav-item a:hover{
	color: #3498DB!important;
}

@media only screen and (min-width: 992px){
	.nav-scroll{
		margin: 0 35px;
	    transition: all .6s ease;
	}

	.logo{
		display: block!important;
		transition: all .9s ease;
	}
}

@media only screen and (max-width: 992px){
	img#logo{
		display: none!important;
	}
}

.bg-menu {
   background: #171719a3!important;
}

img#logo{
	margin-top: 30px;
	padding: 0 10px;
	position: absolute;
	display: none;
	transition: all .9s ease;

}