0

I'm using Foundation 6 and is experimenting with the example. My question is why "Site Title" not aligning with the rest of the top-bar, it is further a little on top.

<div class="top-bar">
        <div class="top-bar-title">
          <span data-responsive-toggle="responsive-menu" data-hide-for="medium">
            <span class="menu-icon dark" data-toggle></span>
          </span>
          <strong>Site Title</strong>
        </div>
        <div id="responsive-menu">
          <div class="top-bar-left">
            <ul class="dropdown menu" data-dropdown-menu>
              <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 class="top-bar-right">
            <ul class="menu">
              <li><input type="search" placeholder="Search"></li>
              <li><button type="button" class="button">Search</button></li>
            </ul>
          </div>
        </div>
      </div>
2

3 Answers 3

1

Wrapping it like this works

<ul class="menu">
   <li class="menu-text"><strong>Site Title</strong></li>
</ul>
0
.top-bar-title {
    float: left;
    margin-right: 1rem;
    margin-top: 0.5rem;
}

fixed it.

2
  • added the margin top? nice. Sorry I didnt get back sooner. Feb 14, 2016 at 4:22
  • no problem, thanks you gave me idea about margin top.
    – Jonh Doe
    Feb 14, 2016 at 4:50
0

F6's .top-bar-title is documented on zurb but is not a class in top-bar.scss; seems like an oversight.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.