"Bootstrap 4 navbar hover effect"
Bootstrap 4.1.1 Snippet by mdwaris198

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<nav class="navbar navbar-expand-sm navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Waris</a>
<div class="collapse navbar-collapse" id="navbarTogglerDemo03">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact us</a>
</li>
<li class="nav-item dropdown dmenu">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
Dropdown link
</a>
<div class="dropdown-menu sm-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</li>
<li class="nav-item dropdown dmenu">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
Dropdown link
</a>
<div class="dropdown-menu sm-menu">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
.navbar{
background: #0c73cc !important;
}
.dropdown{
border-radius:0;
border:0;
}
.dropdown-menu{
background: #0c73cc;
border:0;
top:80%;
border-radius:0px 0px 5px 5px;
}
.dropdown-item:hover{
background:#085ca5;
color:#fff;
}
.dropdown-menu a{
color:#fff;
}
.navbar .nav-item .nav-link{
color:#eee !important;
}
.navbar .nav-item .nav-link:hover .navbar .nav-item .nav-link{
color:red !important;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
$(document).ready(function () {
$('.navbar-light .dmenu').hover(function () {
$(this).find('.sm-menu').first().stop(true, true).slideDown(150);
}, function () {
$(this).find('.sm-menu').first().stop(true, true).slideUp(105)
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments:

hey, where should I add the JS?

I'm trying to add it inside <script> on html but it's not working,

Thanks.

bernardo0marques (-1) - 5 years ago - Reply -1


script add in footer area

Ex:

<script>

$(document).ready(function () {

$('.navbar-light .dmenu').hover(function () {

$(this).find('.sm-menu').first().stop(true, true).slideDown(150);

}, function () {

$(this).find('.sm-menu').first().stop(true, true).slideUp(105)

});

});

</script>

</body>

</html>

mdwaris198 () - 5 years ago - Reply 0