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 Preview

Bootstrap Responsive Navigation Menu with Scroll Effect

How to start using jQuery?

More jQuery Top, Best and New Plugins

Top 100 jQuery Plugins

Plugin Overview

Plugin:	Menu-efec-hover-scrolll
Author:	Target Code
Licence:	MIT Licence
Published:	January 17, 2024
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

Demo Download

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;

}

Similar Code Snippets:

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.

Plugin Preview

Plugin Overview

How to Create Bootstrap Responsive Navigation Menu

Similar Code Snippets:

Leave a Comment Cancel reply