Menu icon Foundation
Problem with Topbar Space

When I add my topbar, I want it fixed to the top. This works on a full screen but when I try to shrink it to mobile size, there is now white space a the top. Any idea what I can do to get rid of this space?

<div class="fixed">
  <nav class="top-bar" data-topbar>
    <ul class="title-area">
      <li class="name">
        <h1><a href="#">Tell</a></h1>
      </li>
      <lu class="toggle-topbar menu-icon"><span><a href="#">Menu</a></span></li>
    </ul>
    <section class="top-bar-section">
      <ul class="right">
        <li><%= link_to "Sign Up", new_user_registration_url %></li>
        <li><%= link_to "Log In", new_user_session_url%></li>
      </ul>
    </section>
  </nav>
</div>
            

         

topbar

When I add my topbar, I want it fixed to the top. This works on a full screen but when I try to shrink it to mobile size, there is now white space a the top. Any idea what I can do to get rid of this space?

<div class="fixed">
  <nav class="top-bar" data-topbar>
    <ul class="title-area">
      <li class="name">
        <h1><a href="#">Tell</a></h1>
      </li>
      <lu class="toggle-topbar menu-icon"><span><a href="#">Menu</a></span></li>
    </ul>
    <section class="top-bar-section">
      <ul class="right">
        <li><%= link_to "Sign Up", new_user_registration_url %></li>
        <li><%= link_to "Log In", new_user_session_url%></li>
      </ul>
    </section>
  </nav>
</div>
            

         
Vanessa Kestering about 5 years ago

Have you tried to use class="sticky" instead of class="fixed"?

anvesh over 3 years ago

May be the H1 tag is causing the trouble for you..Try changing it to another suitable Here I think it will help you to solve this problem :)

Stacy Gilbert almost 3 years ago

I don't think h1 tag can cause a problem here. This is a list and it's formatted well.  What is here "lu class"? I tried to google but found nothing. Can there be a problem?

Also I when I write my paper today I get an idea that code can be rewritten as a table, not list. Hope it will work with you!

Cheers!

Rafi Benkual almost 3 years ago

It looks like its supposed to be a <li>

This example on using sticky should help: http://codepen.io/rafibomb/pen/YGLJJV?editors=1000

Not seeing any spaces here so if you need more help, shoot over a link to the site or the rest of the page code.

Alex Berger over 2 years ago

May be the H1 tag is causing the trouble for you..Try changing it to another suitable Here I think it will help you to solve this problem :)

Ronald Hadley over 2 years ago

I'm sorry, that I'm writing at this post , but I don't know how to add my photo to my profile?

Stpehen Fox over 2 years ago

Visit here and Buy real FB Likes. www.fblikesreal.com

I liked your Post and I am sure that H1 Tag is causing the problem. Try to change it to another size.

deathray over 2 years ago

Have you beed to assigned to write down a paper by tomorrow, but are overwhelmed with other jobs and a profession? Does one think you won't manage to put in writing a well-researched and primary paper merely because of the lack of know-how in a very certain topic? Our 1-hour essay creating provider could be a outstanding resolution for yourself. If you need your tutorial paper (of any variety and tutorial stage) to get accomplished as quickly as possible, is strictly that which you demand. Never hesitate to speak to us - virtually every minute prior to when your deadline is priceless. How We could Help you Regarding tutorial papers, every so often it might be inconceivable to satisfy all deadlines and stick to large educational expectations. A 1 hour essay deadline is usually a genuine situation, for anyone who is not ok at writing and expressing your tips on a topic you are not genuinely interested in 24writer.com. Also, there are actually almost always a lot of other assignments to perform. could in fact be your very best mate and tutor when chatting about 1-hour essay support. Assuming you have 24 hours or significantly less in your deadline, you possibly can count on us. We know such short duration of time is actually a realistic problem even for qualified writers. Hence, we retain some of the most skilled and expert writers to deliver beneficial educational aid.

nick crowe over 2 years ago

look at that open a bar it's decide all questions

 

James thomson almost 2 years ago

First of try changing css tag from class="fixed" to class="sticky" and then if still there is gap in mobile then try using media tags and apply the condition on the header for mobile length. 24 Hour Towing in New York

solo over 1 year ago

this is a very lightning and also informative article cartoon hd app also offer free of cost informative info in video type.