Menu icon Foundation
Centering top bar nav - Mobile view centering issues

Hey all I used the following code to successfully center top bar Li items

nav.top-bar {
text-align:center;
}
section.top-bar-section {
display: inline-block;
}
            

         

But when the top bar collapses for mobile devices the li backgrounds don't look right. See below

Center menu

I've messed around in developer tools for a little while but I'm not really sure what's causing this or how to fix it.

THANKS for any help any of you can give!!

Jon

top-bartop barcentering list itemscentered top bar

Hey all I used the following code to successfully center top bar Li items

nav.top-bar {
text-align:center;
}
section.top-bar-section {
display: inline-block;
}
            

         

But when the top bar collapses for mobile devices the li backgrounds don't look right. See below

Center menu

I've messed around in developer tools for a little while but I'm not really sure what's causing this or how to fix it.

THANKS for any help any of you can give!!

Jon

This post has been closed. No new replies can be added.

Droideka about 5 years ago

HI post, the html code of the navbar thx.

Jon Friedrich about 5 years ago

<div class="contain-to-grid sticky">

  <img class="logo" src="img/logo.png">

        <nav class="top-bar" data-topbar>
              <ul class="title-area show-for-medium-down">
                <li class="name">
                  <h1><a href="#"></a></h1>
                </li>
                <li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
              </ul>




          <section class="top-bar-section">

            <ul class="right">
              <li class="active"><a href="#">Services</a></li>
                <li><a href="#">Portfolio</a></li>

              <li><a href="#">Testimonials</a></li>
                     <li><a href="contact.html">Contact</a></li>



            </ul>
        </nav>


</div>

Jon Friedrich about 5 years ago

Droideka, yours is also displaying incorrectly, it's just less obvious because the background of the list items is not as wide as my example

Look at the below image again, the Services tab background is not centered behind the word services. It's over to the left.

http://i.gyazo.com/bfa3c05b53bc1bf557b67e0baab47c0b.png

Droideka about 5 years ago

Yep ! The problem is coming from the .display: inline-block;

This working for medium up but not small screen (mobile view).

Solution is quite simple. At the base, the css of the class.top-bar-section is display: block but you change it to .display: inline-block; for center the text.

To solve the problem you just have to remove the .display: inline-block; fo small screen.

This is a live exemple : http://jsfiddle.net/gRtrX/96/ and the code :

The css if you use directly the css :

nav.top-bar {
    text-align:center;
}
section.top-bar-section {
    display: inline-block;
}

@media only screen and (max-width: 40em) {
  section.top-bar-section {
    display: block;
  }
}

But if you use .scss i made you the code :

@media #{$small-only} {

  section.top-bar-section {
      display: block;
  } 

}