2

I am trying to style a main navigation component, but I'm having trouble getting the background to stretch for a dynamic number of wrapped columns in the submenu popup. Can anyone help with this jsfiddle? I have exhausted my admitidly limited knowledge of CSS as well as anything I could find through google.

The markup comes from a content management system, so I have limited control of the generated markup, other than adding additional CSS classes, although I have full control over the CSS.

I almost got it working properly using column-count, but the number of columns need to be dynamic. I found other posts mentioning using display: flex, but still can't quite get the combination of flex and inline-block working properly.

This is the layout I am trying to achieve:

Subnavigation

.container {
  display: flex;
  position: relative;
}

.container a {
  text-decoration: none;
  color: #424242;
}

ul {
  list-style: none;
}

.main-navitation>.component-content {
  position: absolute;
  bottom: 0;
  right: 0;
}

.rel-level1 {
  display: inline-block;
  padding: 10px;
  position: relative;
}

.rel-level1>ul {
  display: flex;
  position: absolute;
  top: 30px;
  left: 0;
  background: #e1e1e1;
  border: 1px solid #c2c2c2;
  padding: 5px;
  max-height: 200px;
  flex-wrap: wrap;
  flex-direction: column;
}

.rel-level1>ul>li {
  display: block;
}

.rel-level2 {
  display: inline-block;
  flex-grow: 1;
  flex-shrink: 1 auto;
  flex-basis: 100%;
  width: 85px;
}

.rel-level2>a>.navigation-title {
  display: inline-block;
  font-weight: bold;
}

.rel-level2>ul {
  padding-left: 0;
}

.rel-level3 {
  padding-top: 3px;
  display: inline-block;
  width: 85px;
}

.rel-level3>a>.navigation-title {
  border-bottom: solid 1px transparent;
  display: inline-block;
  font-size: 14px;
}
<div class="container">
  <div class="navigation main-navigation">
      <div class="component-content">
          <nav>
              <ul>
                  <li class="rel-level1">
                      <div class="navigation-title"><a href="/">Level 1</a></div>
                      <ul>
                          <li class="rel-level2">
                              <a href="/" class="navigation-title">
                                  <div class="navigation-title">Submenu 1</div>
                              </a>
                              <ul>
                                  <li class="rel-level3">
                                      <a href="/" class="navigation-title">
                                          <div class="navigation-title">Level 3</div>
                                      </a>
                                  </li>
                                  <li class="rel-level3">
                                      <a href="/" class="navigation-title">
                                          <div class="navigation-title">Level 3</div>
                                      </a>
                                  </li>
                              </ul>
                          </li>
                          <li class="rel-level2">
                              <a href="/" class="navigation-title">
                                  <div class="navigation-title">Submenu 2</div>
                              </a>
                              <ul>
                                  <li class="rel-level3">
                                      <a href="/" class="navigation-title">
                                          <div class="navigation-title">Level 3</div>
                                      </a>
                                  </li>
                                  <li class="rel-level3">
                                      <a href="/" class="navigation-title">
                                          <div class="navigation-title">Level 3</div>
                                      </a>
                                  </li>
                                  <li class="rel-level3">
                                      <a href="/" class="navigation-title">
                                          <div class="navigation-title">Level 3</div>
                                      </a>
                                  </li>
                              </ul>
                          </li>
                          <li class="rel-level2">
                              <a href="/" class="navigation-title">
                                  <div class="navigation-title">Submenu 3</div>
                              </a>
                              <ul>
                                  <li class="rel-level3">
                                      <a href="/" class="navigation-title">
                                          <div class="navigation-title">Level 3</div>
                                      </a>
                                  </li>
                                  <li class="rel-level3">
                                      <a href="/" class="navigation-title">
                                          <div class="navigation-title">Level 3</div>
                                      </a>
                                  </li>
                                  <li class="rel-level3">
                                      <a href="/" class="navigation-title">
                                          <div class="navigation-title">Level 3</div>
                                      </a>
                                  </li>
                              </ul>
                          </li>
                      </ul>
                  </li>
              </ul>
          </nav>
      </div>
  </div>
</div>

Thanks!

LonghornTaco
  • 452
  • 2
  • 14
  • Rather than dropping your 300 lines of HTML and 100 lines of CSS into a fiddle and asking everyone to wade through all of it to find the problem, it would be better to edit your post, hit Ctrl-M, and paste in enough code to demonstrate the problem you're having without all the extra or the need to go to another site. – BobRodes Oct 01 '20 at 17:55
  • thank you for your comment. I already mentioned that my experience with css was limited, so I posted what I thought was enough of my markup and css to show the problem. I don't know what combination of elements, `inline-block`/`block`/`flex`, etc... are causing the problem, so I don't know which snippets to copy/paste into the post itself. Hence the link to jsfiddle. – LonghornTaco Oct 01 '20 at 18:07
  • What you need to do is find a subset of your code that will duplicate your problem. In particular, you don't need 300 lines of HTML code to do that. I would suggest that you spend some time figuring out a minimal example of your problem; that will help all of us — including you — to understand it better. – BobRodes Oct 01 '20 at 18:09
  • I have updated the fiddle with what I think is the minimal amount to exemplify the problem. Is this more helpful? The first example was already significantly paired down from the actual markup/css. – LonghornTaco Oct 01 '20 at 18:18
  • Regardless, the minimal code should be in the question not at a separate link. – Paulie_D Oct 01 '20 at 18:22
  • It is indeed more helpful, and thanks for putting in the work. Now, it would be even more helpful if you would move the code into this post. Edit the post, hit Ctrl-M, and it should be obvious what to do from there. (Part of the reason that we ask you to do that is because links get broken over time, and someone might be looking at this question in 2030 and not be able to find your fiddle.) – BobRodes Oct 01 '20 at 18:32
  • I have moved the code into the post. – LonghornTaco Oct 01 '20 at 18:33
  • Please hit Ctrl-M and go from there. – BobRodes Oct 01 '20 at 18:33
  • My apologies, I was unaware of what `CTRL+M` did. I obviously don't post on stackoverflow very often. – LonghornTaco Oct 01 '20 at 18:38
  • That's ok. Thanks for getting it done. – BobRodes Oct 01 '20 at 18:48

2 Answers2

0

It's a combination of factors:

  • You have your flex-direction set to column, when you're wanting row (which is actually the default, so you can remove the property from your CSS entirely), have a look at https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction
  • You've set a max-height to try to force the child elements to flow horizontally, alongside using flex-wrap: wrap. Neither of these properties are required if you change your flex-direction.
Sam Keen
  • 11
  • 2
  • well, I don't actually WANT things to be wrapped by row, but I was forced into stripping down the example to the bare minimum. I want things to wrap by column. – LonghornTaco Oct 01 '20 at 18:40
  • I have updated the code snippet to include more subnav content that gets wrapped to a second column after hitting a `max-height`. – LonghornTaco Oct 01 '20 at 18:46
  • Have you tried adjusting the snippet with what I've suggested? I doubt you're after stacking your columns vertically, which you'll get with flex-direction:column. With the changes I've suggested, columns will sit horizontally, and the background will wrap around them. If I've misunderstood, could you please make your question more detailed, perhaps including a mockup of the end result you desire? – Sam Keen Oct 01 '20 at 18:47
  • I updated the post with an example rendering of the layout that I'm trying to achieve. And yes, they _are_ looking for columns of stacked menus to wrap to additional columns. – LonghornTaco Oct 01 '20 at 18:51
-3

FYI, you can further simplify your HTML code, and even if you don't know CSS well, remove those rules which reference the unnecessary HTML code that can be removed:

ul {
  list-style: none;
}

.rel-level1 {
  display: inline-block;
  padding: 10px;
  position: relative;
}

.rel-level1>ul {
  display: flex;
  position: absolute;
  top: 30px;
  left: 0;
  background: #e1e1e1;
  border: 1px solid #c2c2c2;
  padding: 5px;
  max-height: 200px;
  flex-wrap: wrap;
  flex-direction: column;
}

.rel-level1>ul>li {
  display: block;
}

.rel-level2 {
  display: inline-block;
  flex-grow: 1;
  flex-shrink: 1 auto;
  flex-basis: 100%;
  width: 85px;
}

.rel-level2>a>.navigation-title {
  display: inline-block;
  font-weight: bold;
}

.rel-level2>ul {
  padding-left: 0;
}

.rel-level3 {
  padding-top: 3px;
  display: inline-block;
  width: 85px;
}

.rel-level3>a>.navigation-title {
  border-bottom: solid 1px transparent;
  display: inline-block;
  font-size: 14px;
}
<ul>
  <li class="rel-level1">
    <ul>
      <li class="rel-level2">
          <a href="/" class="navigation-title">
              <div class="navigation-title">Submenu 1</div>
          </a>
          <ul>
              <li class="rel-level3">
                  <a href="/" class="navigation-title">
                      <div class="navigation-title">Level 3</div>
                  </a>
              </li>
              <li class="rel-level3">
                  <a href="/" class="navigation-title">
                      <div class="navigation-title">Level 3</div>
                  </a>
              </li>
          </ul>
      </li>
      <li class="rel-level2">
          <a href="/" class="navigation-title">
              <div class="navigation-title">Submenu 2</div>
          </a>
          <ul>
              <li class="rel-level3">
                  <a href="/" class="navigation-title">
                      <div class="navigation-title">Level 3</div>
                  </a>
              </li>
              <li class="rel-level3">
                  <a href="/" class="navigation-title">
                      <div class="navigation-title">Level 3</div>
                  </a>
              </li>
              <li class="rel-level3">
                  <a href="/" class="navigation-title">
                      <div class="navigation-title">Level 3</div>
                  </a>
              </li>
          </ul>
      </li>
      <li class="rel-level2">
          <a href="/" class="navigation-title">
              <div class="navigation-title">Submenu 3</div>
          </a>
          <ul>
              <li class="rel-level3">
                  <a href="/" class="navigation-title">
                      <div class="navigation-title">Level 3</div>
                  </a>
              </li>
              <li class="rel-level3">
                  <a href="/" class="navigation-title">
                      <div class="navigation-title">Level 3</div>
                  </a>
              </li>
              <li class="rel-level3">
                  <a href="/" class="navigation-title">
                      <div class="navigation-title">Level 3</div>
                  </a>
              </li>
          </ul>
      </li>
    </ul>
  </li>
</ul>

That said, your question is a duplicate of this post.

BobRodes
  • 5,990
  • 2
  • 24
  • 26