Using Bootstrap 4, a navigation tab is created. However, upon loading the page, the home tab is automatically loaded but not highlighted. Clicking on any tab will highlight it correctly, but once clicked anywhere else on the page, the highlight disappears.
I am looking to address two issues:
- Ensure that the home page is already highlighted as active when the page loads.
- Maintain the active tab's highlight even when clicking elsewhere on the page.
https://i.sstatic.net/Tedd8.png
/* CSS styling */
nav>.nav.nav-tabs {
border: none;
color: #fff;
background: #005440;
border-radius: 0;
}
nav>div a.nav-item.nav-link,
nav>div a.nav-item.nav-link.active {
border: none;
color: #fff;
background: #005440;
border-radius: 0;
}
.tab-content {
background: rgb(254, 254, 254);
line-height: 25px;
border-top: 5px solid #006950;
border-bottom: 5px solid #006950;
border-left: none;
border-right: none;
padding: 30px 25%;
}
nav>div a.nav-item.nav-link:hover,
nav>div a.nav-item.nav-link:focus {
border: none;
background: #006950;
color: #fff;
border-radius: 0;
transition: background 0.20s linear;
}<!-- HTML structure -->
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 ">
<nav>
<div class="nav nav-tabs nav-justified" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
<a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
<a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
Placeholder text for Home tab.
</div>
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
Placeholder text for Profile tab.
</div>
<div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">
Placeholder text for Contact tab.
</div>
</div>
</div>
</div>
</div>
</div>
</div>I've attempted debugging and believe the issue lies with the following code snippet in the CSS:
nav > div a.nav-item.nav-link:hover,
nav > div a.nav-item.nav-link:focus
But I can't seem to pinpoint the exact problem.
If anyone can provide suggestions for improvement, especially regarding HTML and CSS, I would greatly appreciate it. Thank you!