CODEWITHSUNDEEP
htmlcsszurb-foundation
Shpigford
Shpigford

Reputation: 25338

Zurb Foundation Top Bar with simple text and links?

I'm trying to pull off the following Top Bar with Zurb Foundation.

(I'm aware of how to do this with plain HTML...trying to figure out the correct way to do it using Foundation, though.)

topbar_example

So you've got the title-area name on the left (which works fine), and on the right the "Hi, Joe!" is just plain text and then the "Change Settings" and "Log out" are each links (which doesn't work).

Here's what's happening when I build that out...

topbar_example_002

And here's the code I'm using...

<nav class="top-bar">
  <ul class="title-area">
    <li class="name"><h1><a href="#">Acme Company</a></h1></li>
    <li class="toggle-topbar"><a href="#"></a></li>
  </ul>
  <section class="top-bar-section">
    <ul class="right">
      <li>Hi, Joe!</li>
      <li>
        <a href="#">Change Settings</a> | <a href="#">Log out</a>
      </li>
    </ul>
  </section>
</nav>

So how can I get Foundation to work with my original design example above?

Upvotes: 2

Views: 1338

Answers (1)

Albzi
Albzi

Reputation: 15609

Foundation uses the a tag to style it. You're better off putting them in two separate li tags.

e.g.

<li><a href='#'>Change Settings</a></li>
<li class='divider'></li> <!-- built into foundation -->
<li><a href='#'>Log out</a></li>

Your Hi, Joe! should go in a blank a tag also.

Upvotes: 3

Related Questions