On both desktop and mobile screen sizes, I have a white navigation bar. However, for the mobile dropdown menu, I want the background to be grey.
I managed to achieve this by targeting .show on smaller screens in the CSS and specifying the grey background color.
But when toggling the navigation button to open the menu, there is a transition glitch where it displays a white background initially before transitioning to the correct styling that I set.
I am wondering if the solution lies within CSS3's ::before or ::after pseudo-elements.
Any suggestions or ideas?
HTML
<!-- Navigation -->
<nav class="navbar navbar-expand-lg fixed-top">
<img class="navlogo img-fluid" src="img/master/logo1.jpg">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" style="
margin-right: 12px;">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="Default.html"><u>Home</u></a>
</li>
<li class="nav-item">
<a class="nav-link" href="services.html"><u>Services</u></a>
</li>
</nav>
CSS
@media (min-width:345px) and (max-width: 379px) {
.navbar .show {background-color: #f5f5f5; padding:10px; border-bottom:solid 1px black; border-radius: 5px;}
}