I designed a test page with a menu bar that features a triangular pointer when hovered over. Everything looks good except for the issue where the blue menu bar expands in height when adding the pointer at the bottom of the bar. My initial thought is to give the menu bar a fixed height and remove this style during a media query.
Is there a simpler or better solution to add the pointer without affecting the height?
(the triangle should touch the border of the menubar at the very bottom without any gap. I will adjust this after resolving the height issue)
Thank you in advance!
Screenshot: https://i.sstatic.net/sD9bM.png Code:
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="57353838232423253627176379617967">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ef8d80809b9c9b9d8e9fafdbc1d9c1df">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
<style>
.bg-banner {
background-image: linear-gradient(#17517f, #46769d);
}
.bg-headbar {
background-color: #005db9;
}
.bg-banner .nav-link {
color: white !important;
}
#menubar .nav-link {
font-size: 16px;
padding-right: 50px;
color: white;
}
#menubar .nav-link:focus,
#menubar .nav-link:hover,
#menubar .nav-link:visited {
color: white;
}
@media (min-width:768px) {
nav.navbar .navbar-nav li.nav-item.active:after {
content: "";
position: relative;
margin-left: -31px;
left: 50%;
bottom: 15px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid white;
}
}
@media (max-width:767px) {
.dropdown-menu > a {
display: block !important;
}
}
#menubar li.dropdown.show {
position: static;
}
#menubar li.dropdown.show .dropdown-menu {
display: table;
width: 100%;
text-align: center;
left: 0;
right: 0;
margin: 0;
}
.dropdown-menu > a {
display: table-cell;
}
.dropdown-menu > a {
font-weight: 600;
}
</style>
<nav class="navbar navbar-expand-md navbar-dark text-white bg-banner">
<a class="navbar-brand" href="#">Test Site</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-toggle">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse navbar-toggle">
<form class="form-inline my-2 .m-md-0 ml-auto">
<div class="input-group">
<input type="text" class="form-control form-control-sm" placeholder="Seach" size="40">
<div class="input-group-append">
<button class="btn btn-outline-light btn-sm" type="button"><i class="fa fa-search"></i></button>
</div>
</div>
</form>
</div>
<div class="banner-navbar collapse navbar-collapse flex-grow-0 navbar-toggle">
<nav class="navbar navbar-expand-sm navbar-light">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" role="button" href="#">
<i class="fa fa-user"></i>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Sign Out</a>
</div>
</li>
<li class="nav-item">
<a href="#" class="nav-link"><i class="fa fa-cog"></i></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" role="button" href="#">
<i class="fa fa-question-circle"></i>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Help</a>
</div>
</li>
</ul>
</nav>
</div>
</nav>
<nav class="navbar navbar-expand-md navbar-dark text-white bg-headbar py-0 py-8-md">
<div class="collapse navbar-collapse navbar-toggle" id="menubar">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Menu1
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown1">
<a class="dropdown-item" href="#">Home<span class="sr-only"> (current)</span></a>
<a class="dropdown-item" href="#">Submenu 1B</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="#" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Menu2
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown2">
<a class="dropdown-item" href="#">Submenu 2A</a>
<a class="dropdown-item" href="#">Submenu 2B</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="#" id="navbarDropdown3" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Menu3
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown3">
<a class="dropdown-item" href="#">Submenu 3A</a>
<a class="dropdown-item" href="#">Submenu 3B</a>
</div>
</li>
</ul>
</div>
</nav>
<div class="container">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, blanditiis eaque? Vero consequuntur tempora vitae at maxime, repellendus excepturi quia quibusdam odit sed ullam praesentium natus rerum molestiae cupiditate possimus?
</div>
<script type="text/javascript">
$("#menubar li.dropdown").hover(function () {
$(this).addClass("active show");
},
function () {
$(this).removeClass("active show");
});
$("#menubar ul.dropdown-menu>li>a").on("click", function (e) {
$("#menubar li.dropdown").removeClass("active show");
});
</script>