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: 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

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;

}

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...