CODEWITHSUNDEEP
csszurb-foundation
Jerome
Jerome

Reputation: 6189

Foundation 6.4 tweaking top bar

Foundation's top bar navigation tool is set-up to fully flesh out a hierarchy of links, relying upon list and item tags.

<div class="top-bar">
  <div class="top-bar-left">
    <ul class="dropdown menu" data-dropdown-menu>
      <li class="menu-text">Site Title</li>
      <li>
        <a href="#">One</a>
        <ul class="menu vertical">
          <li><a href="#">One</a></li>
          <li><a href="#">Two</a></li>
          <li><a href="#">Three</a></li>
        </ul>
      </li>
      <li><a href="#">Two</a></li>
      <li><a href="#">Three</a></li>
    </ul>
  </div>
</div>

However, in an attempt to soften this structure, the goal is to have the second layer links on a single line, say

<ul><li>
<a href="#">One</a>  <a href="#">Two</a>  <a href="#">Three</a>
</li></ul>

Unfortunately, either display is relinquished to the browser definition for line-item or display:block; from the base code of Foundation overrides even <li style='display: float'><a href="#" style='display: float'> with its .menu a class definition.

How can this one-liner be achieved?

Upvotes: 0

Views: 43

Answers (1)

Bjorn.B
Bjorn.B

Reputation: 1705

Looks like you may have mixed up your css rules: display: block; and float: none. The default behaviour looks like it wants it to be vertical, and the structure looks to be built in that way. I didn't see anything in their docs for this (I skimmed them lol) but what I did to make it work was to use position:absolute; on that submenu, and then position it. I don't know what the rest of your menu looks like, but you will need to adjust I assume.

I created a codepen that might do what you need it to.

https://codepen.io/bjorniobennett/pen/bGGajWZ

    ul.dropdown > li {
      position: relative;

      &:hover {
        > ul.vertical {
            display: block;
        }
      }

      > ul.vertical {
        display: none;
        position: absolute;
        width: 500%; 
        background: #c5c5c5;
        top: 120%;

        > li {
          display: inline-block;
          float: left;
        }
      }
    }

Upvotes: 1

Related Questions