I am currently trying to achieve linking two nav-link classes(on two, separate, navs. One is at the top and the other at the bottom.) to one tab-pane div class within a page using Bootstrap but am having some issues and trying to fix them. It currently works well on the first nav menu but on the second one, only on the first initial click.
After that, I noticed some things I would like to fix: I overwrote some css styles for the default, active, Bootstrap class on the first nav menu links but it's not applying them to that first menu link whenever I click on the second one at the bottom and I would like them to. Second, well the second nav link at the bottom only shows the tab-pane only once when clicked and I would like it to show on multiple clicks.
I feel like both of those issues are related to the same fix to be honest so I hope it helps when solving it. I've tried many things trying to fix this including using different jquery snippets to turn off the active class and all that but still no luck. I'm not sure if my css really affects this issue but I will paste it anyways. I really have no idea what I'm doing wrong and have tried many things to try to fix this. Thank you in advance!
NOTE* The second nav menu I'm referring to is under the footer with the id="foot-nav" on the ul tag.
My HTML:
<div class="container-fluid">
<div class="row navigation">
<div class="col-8 d-flex nav-left">
<ul id="nav-container" class="nav nav-tabs">
<li class="nav-item nav-itemcontain">
<a class="nav-link active" data-toggle="tab" href="#about">About Me</a>
</li>
<li class="nav-item nav-itemcontain">
<a class="nav-link" data-toggle="tab" href="#services">Services</a>
</li>
<li class="nav-item nav-itemcontain">
<a class="nav-link" data-toggle="tab" href="#projects">Projects</a>
</li>
<li class="nav-item nav-itemcontain">
<a class="nav-link" data-toggle="tab" href="#contact">Contact 2</a>
</li>
</ul>
</div>
<div class="col d-flex nav-right">
hkgjvhj
</div>
</div>
<div class="row about-body">
<div class="col-8 about-changing">
<div class="tab-content">
<div id="about" class="container tab-pane active"><br>
...
</div>
<div id="services" class="container tab-pane fade"><br>
...
</div>
<div id="projects" class="container tab-pane fade"><br>
...
</div>
<div id="contact" class="container tab-pane contact-tab fade"><br>
<h3>Contactrtgtr</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
</div>
<div class="col about-fixed">wrgeyrg</div>
</div>
<div class="row footer">
<div class="col d-flex foot-copyright">© Blah Blah 2020 - All Rights Reserved.</div>
<div class="col d-flex foot-contact mh-100">
<ul id="foot-nav" class="nav">
<li class="nav-item underline">
<a class="nav-link" data-toggle="tab" href="#contact">Begin Your Project</a>
</li>
</ul>
</div>
<div class="col d-flex justify-content-end foot-social-media">
<ul class="nav">
<li class="nav-item"><a href="#" class="fa fa-linkedin"></a></li>
<li class="nav-item"><a href="#" class="fa fa-youtube"></a></li>
<li class="nav-item"><a href="#" class="fa fa-instagram"></a></li>
<li class="nav-item"><a href="#" class="fa fa-snapchat-ghost"></a></li>
</ul>
</div>
</div>
</div>
My CSS:
.navigation {
height:70px;
}
#nav-container {
border-bottom: 2.5px solid transparent;
}
#nav-container .nav-link {
border-bottom:2.5px solid #ffd633;
border-right: none;
border-left: none;
border-top: none;
border-color: #ffd633;
}
#nav-container .nav-link, #nav-container .nav-link:visited {
margin-bottom: 0px;
color: white;
transition: 1s;
border-bottom: 2.5px solid transparent;
}
#nav-container .nav-link:hover, #nav-container .nav-link:focus {
border-color: #ffd633;
border-right: none;
border-left: none;
border-top: none;
text-decoration: none;
}
#nav-container .active, #nav-container .active, #nav-container .active:hover {
background: none;
border-bottom: 2.5px solid #ffd633;
border-color: #ffd633;
}
#nav-container .nav-link.active {
border-bottom: 2.5px solid #ffd633;
}
.about-body {
height:470px;
}
.footer {
height:70px;
}
.footer .col {
height: 100%;
}
.foot-contact {
align-items: center;
justify-content: center;
font-size: 30px;
}
.underline {
display: inline-block;
height: 100%;
}
.underline:after {
content: '';
width: 0px;
height: 5px;
display: block;
background: #ffd633;
border-radius: 2px;
transition: 0.5s;
}
.underline:hover:after {
width: 100%;
}
.foot-contact a, .foot-contact a:visited, .foot-contact a:hover {
color: white;
font-weight: 600;
text-decoration: none;
letter-spacing: 1px;
}
.foot-contact a:hover {
opacity:.85;
}
My Links:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"><!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/><!-- Add icon library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script><!-- jQuery library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script><!-- Popper JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script><!-- Latest compiled JavaScript -->