After creating a navigation bar with bootstrap, I wanted to make the active tab stand out above the others. Here's what I achieved:
https://i.sstatic.net/lmPz8.png
Once I managed to connect the tabs with the content using a "before" class, everything looked good:
https://i.sstatic.net/3B2yf.png
However, when switching between tabs, there's a brief moment where the transition looks awkward:
https://i.sstatic.net/KqKce.png
Is there a way to fix this issue or hide the bottom shadow differently? I've tried using events like on hidden.bs.tab and shown.bs.tab without any luck so far.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<style>
ul.custom-nav-tab {
border-bottom: 0px !important;
margin-left: 20px;
font-weight: 800;
}
ul.custom-nav-tab li a.active {
background-color: #ffeed2 !important;
border-color: #fff0 !important;
}
ul.custom-nav-tab li a {
box-shadow: 1px 2px 7px 0 rgba(0, 0, 0, 0.3);
padding: 15px 20px 15px 20px;
color: inherit;
border-radius: 10px 10px 0px 0px !important;
background-color: #fef7ea !important;
}
div.custom-nav-tab {
position: relative;
border-radius: 10px;
background-color: #ffeed2;
padding: 20px;
box-shadow: 1px 2px 7px 0 rgba(0, 0, 0, 0.3);
}
.custom-nav-active-tab {
position: relative;
}
.custom-nav-active-tab:before {
content: "";
display: block;
width: 100%;
height: 15px;
background-color: #ffeed2;
position: absolute;
bottom: -5px;
left: 0;
z-index: 10;
}
</style>
<body>
<div class="container">
<div class="row">
<div class="col-12">
<ul class="nav nav-tabs custom-nav-tab" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Hotel + Activity</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Hotel</a>
</li>
</ul>
<div class="tab-content custom-nav-tab" id="myTabContent">
<div class="tab-pane fade show active tab1" id="home" role="tabpanel" aria-labelledby="home-tab"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius varius turpis at consequat. Suspendisse potenti. Vestibulum sagittis eget enim non dapibus. Nam luctus lectus nulla, eget convallis libero ultrices nec. Duis feugiat ex ut nunc mollis facilisis. Proin eu lacus sed justo cursus condimentum id at mi. Aliquam erat volutpat.</p></div>
<div class="tab-pane fade tab2" id="profile" role="tabpanel" aria-labelledby="profile-tab"> <p>xxxxxDonec mattis laoreet suscipit. Donec blandit quam sed justo mattis, et hendrerit leo sodales. Donec elit leo, sollicitudin sed purus vitae, iaculis iaculis lacus. Proin quis leo a purus gravida ultricies. Nam molestie a nisi sed scelerisque. Proin in suscipit sem, in viverra libero. Proin quam diam, consequat vitae arcu eget, egestas ultrices eros. Donec sed fermentum lorem. Nam dolor sem, aliquam dapibus rutrum id, tempor ac leo. Vestibulum in neque id eros tristique lacinia. Duis a bibendum dolor, nec cursus eros. Morbi quis enim eu quam gravida lacinia. Etiam tincidunt venenatis felis quis pellentesque. Sed sagittis elit vitae arcu malesuada, quis dapibus libero porttitor.
</p></div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$(".nav-item:has(a.active)").addClass("custom-nav-active-tab");
});
$('a[data-toggle="tab"]').on('hidden.bs.tab', function (e) {
$(".nav-item, a").not(".active").removeClass("custom-nav-active-tab");
$("..nav-item:has(a.active)").addClass("custom-nav-active-tab");
});
</script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 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>
</body>
</html>