Menu icon Foundation
Trouble Experimenting with Sticky Bar

I've just started learning of Foundation in general and all that comes with it (columns [small-#], nav bars and so forth) and I am trying to make a sticky bar that features a Call and Nav button for people using the mobile site. The buttons seem to enjoy sticking to the top of the nav bar when the site is viewed from a mobile sized screen, but they center vertically to the bar otherwise...any tips or help?

Screen shot 2014 12 14 at 8.22.59 pm

Screen shot 2014 12 14 at 8.23.24 pm

<div class="sticky">
       	<nav class="top-bar" data-topbar role="navigation">
   			<ul class="button-group even-2">
   				<li class="has-form">
   					<div class="small-12 medium-5 large-6">
   						<a href="tel:+4018316277" class="button">Call Us</a>
     				</div>
	 			</li>
    
	 			<li class="has-form">
	 				<div class="small-12 medium-5 large-6">
	 					<a href="https://goo.gl/maps/IhGqn" class="button">Directions</a>
	 				</div>
	 			</li>
     		</ul> 
  		</nav>
   </div>

            

         

navbarstickybuttonstrouble

I've just started learning of Foundation in general and all that comes with it (columns [small-#], nav bars and so forth) and I am trying to make a sticky bar that features a Call and Nav button for people using the mobile site. The buttons seem to enjoy sticking to the top of the nav bar when the site is viewed from a mobile sized screen, but they center vertically to the bar otherwise...any tips or help?

Screen shot 2014 12 14 at 8.22.59 pm

Screen shot 2014 12 14 at 8.23.24 pm

<div class="sticky">
       	<nav class="top-bar" data-topbar role="navigation">
   			<ul class="button-group even-2">
   				<li class="has-form">
   					<div class="small-12 medium-5 large-6">
   						<a href="tel:+4018316277" class="button">Call Us</a>
     				</div>
	 			</li>
    
	 			<li class="has-form">
	 				<div class="small-12 medium-5 large-6">
	 					<a href="https://goo.gl/maps/IhGqn" class="button">Directions</a>
	 				</div>
	 			</li>
     		</ul> 
  		</nav>
   </div>

            

         
Jacob Brooks over 4 years ago

Its hard to tell from this but a quick fix might be to add the "Expand" Class to your "A Tag." This class lets the link with the Button class expand to fill its div. For example in your case:

<div class="small-12 medium-5 large-6">
     <a href="tel:+4018316277" class="button expand">Call Us</a>
</div>

If that doesn't work let me know and I can help you work through some other options.

Good Luck,

Jacob

Rafi Benkual over 4 years ago

If you want the buttons to not be full width, use the class contain to grid:

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

Not sure what you are trying to accomplish but top-bar is not for what is pictured. Try a button group with a background instead.

http://codepen.io/rafibomb/pen/myPgPr