Search code examples
jquerymobiletogglenavbar

navbar-collapse conflict with position elements

I'm having a problem with my website, it's a store locator page. But when you resize your window if you're in PC as if you're in mobile resolution, when you toggle the navbar-collapse, the navbar will be underneath the sidebar which looks very ugly. Is there something wrong with my CSS?

DEMO

Screenshot

body {
      color:#404040;
      font:400 15px/22px 'Source Sans Pro', 'Helvetica Neue', Sans-serif;
      margin:0;
      padding:0;
      -webkit-font-smoothing:antialiased;
    }

    * {
      -webkit-box-sizing:border-box;
      -moz-box-sizing:border-box;
      box-sizing:border-box;
    }
    .sidebar {
      position:absolute;
      width:33.3333%;
      height:100%;
      top:90px;left:0;
      overflow:hidden;
      border-right:1px solid rgba(0,0,0,0.25);
    }

    .map {
      position:absolute;
      left:33.3333%;
      width:66.6666%;
      top:90px;bottom:0;
    }

Update (08/10/2017): The problem was solved by the ff:

Okay, wrap the sidebar and map in a new div with position:relative and height:100vh; – thehuijb

Solution

  • add 

    .dark-header .menu-header, .header-dark .menu-header {
    position:relative;
}