Search code examples
javascriptcssbootstrap-4nav

Bootstrap Mobile Nav Transition display not what I have programmed in CSS

In desktop and mobile screen sizes I have a white nav bar. For the mobile dropdown I want the background to be grey.

I've accomplished this targeting .show on smaller screens - writing in the css for the grey background.

However, when toggling the nav button to open the menu, the transition will display a white background and no CSS I've written, after the transition it hops to what I've told it to.

Im unsure, but maybe the answer is within css3's ::before or ::after.

Any ideas?

HTML

<!-- Nav -->
<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;}    
  }

During Transition (white background, no padding-left)

After Transition (grey background, padding-left applied)

Solution

  • Austin bootstrap uses its own component, and the CSS animation you mentioned occurs after it's completed, just as you said. To resolve the issue, you need to apply the same properties in CSS to the 'collapse' as you did.

    <div class="collapse" id="navbarToggleExternalContent" style=" background-color: #f5f5f5; border-bottom:solid 1px black; padding:10px;">

    But I wouldn't recommend doing this directly with style properties; you would override the wrapper temporarily. However, it's a nice temporary solution. Another solution is to customize the 'collapse' using Bootstrap properties. I'd recommend looking into that when you have the time.