CODEWITHSUNDEEP
htmlcsszurb-foundation
Eric
Eric

Reputation: 5215

How to get two Foundation menus next to each other?

I can't sort out the right tricks with the Foundation class, to have my two menus (the two <ul> structures) to be next to each other on the same line.

enter image description here

Here's a CodePen: https://codepen.io/pnoeric/pen/yvgOOv/

<div class="top-bar" id="responsive-menu">
    <div class="top-bar-left">
        <a class="title-bar-title" href="#">
            Site Title Goes Here
        </a>
    </div>
    <div class="top-bar-right">
        <ul class='menu align-right'>
            <li>One</li>
            <li>Two</li>
            <li>Three</li>
        </ul>
        <ul class='menu align-right'>
            <li>Menu 2 One</li>
            <li>Menu 2 Two</li>
            <li>Menu 2 Three</li>
        </ul>
    </div>
</div>

Upvotes: 0

Views: 284

Answers (1)

Stickers
Stickers

Reputation: 78686

Since ul is block level, by default it takes the entire row available, and two ul elements means two rows. There are many ways to change that such as:

.top-bar-right {
  display: flex;
}

or

.top-bar-right ul {
  display: inline-block;
}

and looks like the framework set the li to float, otherwise that needs to be reset to.

Upvotes: 1

Related Questions