CODEWITHSUNDEEP
htmlcsszurb-foundation
user3128376
user3128376

Reputation: 994

Foundation TopBar: Position Title in Center

I'm using Foundation's top-bar and I want to position the title, "Home" in the center of the top-bar while keeping my "Menu" in the end of the right side. However, what I'm getting from my code is my "Home" still stays in the left side and my "Menu" is on the right side.

I realized that if I take out the title-area (has float: left) then it will center my "Home" but it pushes my "Menu" below the top-bar but it still stays in the right side looking like thisLooking like this.

Does anyone know how to position the title in the middle while keeping the Menu on the right side in the topbar?

Thanks!

    <nav class="top-bar" data-topbar role="navigation">
     <ul class="title-area">
       <li class="name">
            <h1 id="top_bar_page_title">Home</h1>
       </li>
       <li class="toggle-topbar menu-icon"><a href="#"><span></span></a></li>
     </ul>
     <section class="top-bar-section">
     <!-- Right Nav Section -->
     <ul class="right">
       <li class="has-dropdown">
           <a href="#">Menu</a>
            <ul class="dropdown">
             <li><a href="#">First link in dropdown</a></li>
             <li class="active"><a href="#">Active link in dropdown</a></li>
           </ul>
         </li>
       </ul>
      </section>
    </nav>

#top_bar_page_title{
  color: $white;
    text-align: center;
}

Upvotes: 1

Views: 1490

Answers (2)

m4n0
m4n0

Reputation: 32255

Add the following CSS rule to the existing code. Setting a width and margin: 0 auto will help the menu find the center.

@media (min-width: 640px) {
  .top-bar .title-area {
    float: left;
    margin: 0 auto;
    width: calc(100% - 90px);
    position: unset;
  }
}

Codeply Demo

If you do not want calc(), use a width of 85%.

Upvotes: 1

Rahul S
Rahul S

Reputation: 643

IF you want the menu to stay in the right. Just give the width like

.title-area {
    float: left;
    width: 80%;
}

nav {
    background: #ff0000 none repeat scroll 0 0;
}

If got any clarification. Can you provide url so that I can clear you more

Upvotes: 0

Related Questions