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;
}
Similar Code Snippets:
Responsive Hamburger Menu with jQuery & CSS
CSS Text Overflow Scroll Animation
Keep Navigation Bar on Top When Scrolling
Pure CSS Vertical Menu with Submenu - Accordion Menu
Super Simple Image Comparison Slider in HTML
CSS Responsive Header with Logo and Menu
Horizontal Dropdown Menu with jQuery for bootstrap 4
jQuery Interactive Dropdown List Box on Hover
Animated Kebab Menu in HTML & CSS
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.