While working with Bootstrap 4, I encountered an issue where the text navigation items in the navbar were appearing semi-transparent regardless of my efforts to adjust the code. The dark blue background color of the navbar was causing the opacity to make it difficult to read the navigation links.
Here is a snippet of the HTML code for the navbar:
<nav class="navbar navbar-expand-lg navbar-dark sticky-top">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Nav Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Nav Link 2</a>
</li>
</ul>
</div>
</nav>
The issue arose when I resized the window to a mobile size and noticed that the hamburger icon wasn't showing up. This was because I had omitted the 'navbar-dark' class. Once I included it back, the hamburger menu appeared, but unfortunately, the opacity of the nav-items decreased as a result.
Here is a glimpse of my CSS code related to the navbar styling:
nav {
background-color: #005C90;
}
nav.navbar {
color: #F9FEFF;
}
.navbar-brand {
font-size: 16pt;
}
.nav-item .nav-link{
font-size: 14pt;
}
I've attempted various adjustments to different classes and tags, including changing from hex to rgba to manipulate the opacity, but so far, only the 'navbar-brand' remains at full opacity while the rest are still semi-transparent.
I've experimented with editing numerous combinations of tag and class styles, but have yet to find a solution. It seems like none of the changes I've made are having the desired effect on the opacity of the navigation items.