My first visit here, please be patient.
I am trying to emphasize the selected navigation link, and it seems to work fine for all except the first one (small).
Even after selecting other options (medium or large) which do change color upon selection, when I reselect the small option, its color remains unchanged.
Additionally, the small option is originally black in color.
Here is my code, utilizing Vue with Bootstrap installed:
<template>
<div >
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<button
class="nav-link car-head active"
id="nav-ssprinter-tab"
data-bs-toggle="tab"
data-bs-target="#nav-ssprinter"
type="button"
role="tab"
aria-controls="nav-ssprinter"
aria-selected="true"
>Small
</button>
<button
class="nav-link car-head"
id="nav-msprinter-tab"
data-bs-toggle="tab"
data-bs-target="#nav-msprinter"
type="button"
role="tab"
aria-controls="nav-msprinter"
aria-selected="false"
>
Medium
</button>
<button
class="nav-link car-head"
id="nav-xlsprinter-tab"
data-bs-toggle="tab"
data-bs-target="#nav-xlsprinter"
type="button"
role="tab"
aria-controls="nav-xlsprinter"
aria-selected="false"
>
Big
</button>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div
class="tab-pane fade show active"
id="nav-ssprinter"
role="tabpanel"
aria-labelledby="nav-ssprinter-tab"
tabindex="0"
>
Small Text
</div>
<div
class="tab-pane fade"
id="nav-msprinter"
role="tabpanel"
aria-labelledby="nav-msprinter-tab"
tabindex="0"
>
Medium Text
</div>
<div
class="tab-pane fade"
id="nav-xlsprinter"
role="tabpanel"
aria-labelledby="nav-xlsprinter-tab"
tabindex="0"
>
Big Text
</div>
</div>
</div>
</template>
<script>
export default {
components: {},
methods: {},
};
</script>
<style>
.car-head{
color: black !important;
font-weight: bold !important;
}
.car-head + .active {
color: rgb(243, 158, 0) !important;
background: rgb(220, 220, 220) !important;
}
</style>
I have verified the IDs and classes, and even adjusted the CSS styling order at the end, although this resolved a different issue, the problem with the small option persists.
I was hoping that there might be a typo in the class names of the small navigation link causing it to remain black initially and when reselected. However, I couldn't find any other reason for this behavior.