Bootstrap CSS messes up collapsible menu z-index?-Twitter bootstrap

Geoff_S
June 5, 2018
73 views
0 votes
2 Answers

Basically, I have a site that has a sticky header and sidebar nav but when the screen is made smaller, the menu adopts a hamburger button that can expand the collapsible sidebar.

This works as expected except for one thing: The inclusion of the bootstrap CSS cdn.

So If I comment out the CDN for the bootstrap CSS it works correctly, but If I include it and make the screen mobile size, upon hitting the menu button, the menu expands under the main content cards in the main div. If I comment it out, the menu expands on top of the cards as it should.

IN my codepen above, it has the bootstrap CDN to show the error. I have a custom CSS which is also attached there and I have a lot of styling there, I’m just wondering how I can get this fixed and still have the bootstrap CSS for other stying.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<header>
  <div class="branding">
    <div class="menu-button menu-toggle nav">
      <i class="material-icons">menu</i>
    </div>
    <img src=""/>
  </div>
  <div class="page-details"></div>
  <div class="settings">
    <div class="menu-button profile">
      <i class="material-icons">person</i>
    </div>
    <div class="menu-button menu-toggle aside">
      <i class="material-icons">chat</i>
    </div>
  </div>
</header>
<div class="app">
  <nav>
    <div class="title-block">
      <img src=""/>
    </div>
    <ul>
      <li>
        <a href="#">
          <i class="material-icons">home</i>
          <span>Home</span>
        </a>
      </li>
      <li>
        <a href="#">
          <i class="material-icons">adb</i>
          <span>Menu Item with a Long Name</span></a></li>
      <li>
        <a href="#">
          <i class="material-icons">android</i>
          <span>Android</span></a></li>
      <li>
        <a href="#">
          <i class="material-icons">attachment</i>
          <span>Attachments</span>
        </a>
      </li>
      <li>
        <a href="#">
          <i class="material-icons">bookmark</i>
          <span>Bookmarks</span>
        </a>
      </li>
      <li>
        <a href="#">
          <i class="material-icons">star</i>
          <span>Favorites</span>
        </a>
      </li>
      <li>
        <a href="#">
          <i class="material-icons">build</i>
          <span>Configuration</span>
        </a>
      </li>
      <li>
        <a href="#">
          <i class="material-icons">cake</i>
          <span>Birthday Party</span>
        </a>
      </li>
      <li>
        <a href="#">
          <i class="material-icons">brush</i>
          <span>Designer</span>
        </a>
      </li>
      <li>
        <a href="#">
          <i class="material-icons">camera</i>
          <span>Photos</span>
        </a>
      </li>
    </ul>
  </nav>

  <!--These are the cards that the menu expands underneath-->
  <article>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
  </article>
</div>

Answers

- SaraKat
- June 5, 2018 at 3:54 pm
- 0 votes
0
nav.open {z-index: 1 !important};

Z-index will allow you to show the nav on top of other elements and the !important will help you overwrite the bootstrap css

Login or Signup to reply.