Bootstrap 4: Full width collapsible navbar with different color to main navbar

Question

I'm using Bootstrap4 and I want to have collapsible menu on mobile that is full width and a different colour to my navbar.

I have set a background color on navbar-collapse - so far so good. The problem is that the navbar has a padding which means that the collapseible also is subject to the padding. If I over-ride the padding of the navbar class then brand and burger menu are not aligned correctly.

This is my mark-up:

<nav class="navbar bg-light navbar-light floating navbar-expand-sm cm-navbar" id="mj-topbar">
  <div class="container"> 
    <a class="navbar-brand nb-brand" href="/index.php">My Brand</a>
    <button type="button" class="navbar-toggler nb-hamburger-button" data-toggle="collapse" data-target="#collapseCoreNav" aria-controls="collapseCoreNav" aria-expanded="true" aria-label="Toggle Navigation">
    <span class="navbar-toggler-icon"></span></button>
    <div class="navbar-collapse collapse show" id="collapseCoreNav" style="">
      <ul class="navbar-nav ml-auto">       
        <li class="nav-item">
          <a class="btn_ tdbLink fa-angle-right_ nav-link" href="/">Home</a>
        </li>
        <li class="nav-item">
          <a class="btn_ tdbLink fa-angle-right_ nav-link" href="/login.php">Login</a>
        </li>
       </ul>
    </div>
  </div>
</nav>

This must be available out of the box without me hack the css?

Akber Iqbal Akber Iqbal · Accepted Answer · 2019-12-27T01:18:31

To get this, don't use the default bg-light class - it applies !important which we want to avoid...

We can get this using a simple media query for this?

working snippet:

nav {
  background-color: lightpink
}

@media screen and (max-width:595px) {
  nav {
    background-color: lightgreen
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>


<nav class="navbar  navbar-light floating navbar-expand-sm cm-navbar" id="mj-topbar">
  <div class="container">
    <a class="navbar-brand nb-brand" href="/index.php">My Brand</a>
    <button type="button" class="navbar-toggler nb-hamburger-button" data-toggle="collapse" data-target="#collapseCoreNav" aria-controls="collapseCoreNav" aria-expanded="true" aria-label="Toggle Navigation">
    <span class="navbar-toggler-icon"></span></button>
    <div class="navbar-collapse collapse show" id="collapseCoreNav">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="btn_ tdbLink fa-angle-right_ nav-link" href="/">Home</a>
        </li>
        <li class="nav-item">
          <a class="btn_ tdbLink fa-angle-right_ nav-link" href="/login.php">Login</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<s

Bootstrap 4: Full width collapsible navbar with different color to main navbar

1 Answers