flyout not showing properly (perhaps flexbox problems)

Question

I need to create an onhover flyout menu that should look something like this:

A colleague of mine has already prepared something for our default template and it works perfectly within that template. However, I must've changed something along the way that affects the flyout menu, because the one I have at the moment looks like this:

So, not really, what I'm looking for. Here is the (s)css code for the flyout:

.flyout {
  position: static !important;
  .flyout-menu {
    position: absolute;
    background: $flyout-background;
    left: 0;
    top: 80px;
    width: 100%;
    height: auto;
    opacity: 0;
    visibility: hidden;
    transition: visibility $animation-base, opacity $animation-base;
    z-index: 1;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    .nav {
      flex-direction: column;
      .nav-item {
        background: $flyout-background;
      }
    }
  }
}

.flyout:hover {
  .flyout-menu {
    visibility: visible;
    opacity: 1;
  }
}

here is the HTML portion:

<ul class="nav navbar-nav">
  <li class="nav-item flyout">
    <a class="nav-link" href="#">Shop <i class="fa fa-chevron-down" aria-hidden="true"></i></a>
    <div class="flyout-menu">
      <div class="col-12 col-lg-4">
        <ul class="nav nav-pills nav-stacked">
          <li class="nav-item"><a href="#">Schläuche / Zubehör</a></li>
          <li class="nav-item"><a href="#">Persönliche Ausrüstung</a></li>
          <li class="nav-item"><a href="#">Retten</a></li>
          <li class="nav-item"><a href="#">Technische Hilfeleistung</a></li>
        </ul>
      </div>
      <div class="col-12 col-lg-4">
        <ul class="nav nav-pills nav-stacked">
          <li class="nav-item"><a href="#">Beleuchtung</a></li>
          <li class="nav-item"><a href="#">Umweltschutz</a></li>
          <li class="nav-item"><a href="#">Magazineinrichtung</a></li>
          <li class="nav-item"><a href="#">Dienstleistung / Ausbildungsmaterial</a></li>
        </ul>
      </div>
      <div class="col-12 col-lg-4">
        <ul class="nav nav-pills nav-stacked">
          <li class="nav-item"><a href="#">Geschenkartikel</a></li>
          <li class="nav-item"><a href="#">Brandschutz</a></li>
          <li class="nav-item"><a href="#">Hochwasserschutz</a></li>
        </ul>
      </div>
    </div>
  </li>
  <!-- ... more menu stuff -->
</ul>

The only place where I modify a nav element out of a @media scope is here, which is not even relevant for the flyout-menu class:

.main-header {
  box-shadow: 0 0 20px #000;
  position: relative;
  z-index: 200;
  background-color: $white-base;

  &-inner {
    width: 100%;
    max-width: $inner-container-narrow;
    height: $header-inner-height;
    margin: 0 auto;
    position: relative;
    background-color: $white-base;
    z-index: 10;

    .nav:not([class="flyout-menu"]) {
      position: absolute;
      right: 0;
      bottom: -20px;
    }
  }
  /* ... */
}

I will try to replicate it on codepen.io or so, if I can make some time for it. Until then, any ideas?

EDIT

I was able to recreate it in codepen.io. I reckon the .flyout-menu codes are alright, because if used alone, without all the other styles, it works. So it really is my fault, I broke it somewhere, I just can't find out, where.

Here's the pen: http://codepen.io/kerowan/pen/oBVBRq

try creating example in codepen.io or jsbin.com so we can help you better — melanholly, Feb 15 '17 at 09:02
@PatrickManser It seems to be with you trying to not set position absolute on your flyout-menu. With the layout you're trying to achieve you shouldn't need to be setting the main navigation absolutely. If you comment out the :not selector portion of code you will see it start to behave more normally. — Alsh, Feb 15 '17 at 10:08
@Alzor put it up as answer so I can validate it as the correct answer.. you put me on the right track. I positioned both the main nav and the top nav `relative` and removed the whole `.nav:not()` part. after that it began to behave properly and I just had to position the navs. — Patrick Manser, Feb 15 '17 at 10:36
@PatrickManser Done my friend, glad you've gotten back on the right track. Good luck! — Alsh, Feb 15 '17 at 10:43

score 1 · Accepted Answer · answered Feb 15 '17 at 10:43

1

Removing the following block will stop the menu from displaying incorrectly:

.nav:not([class="flyout-menu"]) {
    position: absolute;
    right: 0;
    bottom: -20px;
}

answered Feb 15 '17 at 10:43

Alsh

307
1
5
15

score 0 · Answer 2 · edited May 23 '17 at 12:25

0

After struggle for a while I asked google about it so the answer came up from around here Is it possible to have a child element behind his parent element with z-index

I would suggest moving the navigation items to separated element outside of .main-header-inner than to toggle them using javascript. Other options is having them appear after the drop shadow in some container.

.flyout-menu {
    // ......
    top: 180px;
    // ......
}

PS: I hope someone gives you better answer to this one

edited May 23 '17 at 12:25

Community

1
1

answered Feb 15 '17 at 10:12

melanholly

762
1
9
20

Thanks, I found the solution. The whole `.nav:not()` part was unnecessary and I positioned the main nav and the top nav `relative`. After that I just had to position both navs, the flyout was behaving correctly. – Patrick Manser Feb 15 '17 at 10:38

flyout not showing properly (perhaps flexbox problems)

2 Answers2