I'm currently learning how to use bootstrap and I'm attempting to create a navbar that shrinks when scrolled down, and I also want the hover effect on the links to be full-height. I've tried multiple approaches but haven't been successful. Can someone please assist me in creating this navigation bar with full-height hover on links? Below is the code I've written:
HTML Code
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid" id="fullheader">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div>
<div class="collapse navbar-collapse navbar-right" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
<li><a href="#section3">Section 3</a></li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 4 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#section41">Section 4-1</a></li>
<li><a href="#section42">Section 4-2</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
CSS Code
.navbar{
width: 100%;
padding: 40px 0;
background-color:#FFf;
border-bottom: 1px solid #e1e1e1;
/* animation magic */
transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out ;
z-index: 9999;
top: 0;
position: fixed;
}
.navbar-default{
background-color:#fff !important;}
.shrink{
padding: 10px 0;
}
.navbar-default .navbar-brand{
font-size: 30px;
-webkit-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
}
.navbar-default .navbar-brand,.navbar-default .navbar-brand:hover{
color: #646464;
margin-left: 80px !important;
}
.shrink .navbar-brand{
font-size: 20px;
}
.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>.active>a{
background-color: #00CCFF!important;
display:block;
}
.navbar-default .navbar-nav>li>a{
color: #FF0000 !important;
font-size: 16px;
font-weight: 500;
}
JavaScript Code
$(document).ready(function(){
$('body').scrollspy({target: ".navbar", offset: 50});
$("#myNavbar a").on('click', function(event) {
if (this.hash !== "") {
event.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
window.location.hash = hash;
});
}
});
});
$(window).scroll(function(){
$scrol=$(document).scrollTop();
//console.log($scrol);
if($scrol > 100){
$(".navbar").addClass("shrink");
}
else
{
$(".navbar").removeClass("shrink");
}
});