Just started with foundation theme and loving it. fully updated, however when I use the “buy now” button set up and protocol the button itself does not align correctly in the top nav. I have increase the width if the top nav bar but the button does not seem to have the same padding, margins etc. Is there any css I am missing? relative newcomer only two published sites so far:)
Thanks for any help
Ian
If you have a button in a TopBar zone, then with the button size set to “Tiny” in its settings it should align vertically.
This is a topbar with all its settings at default values and a “tiny” sized button in the right hand extra zone - as in this pic https://infinit.io/_/3j4x5wP
Tav, thanks for taking the time. I’m not find the option for tiny in any of the settings. Do i need to type it instead of primary.
Currently have an offsite page titled
- Register
and in the extra zone not seeing tiny. Sorry if obvious but finding my way
Thanks
sorry offsite page is button class=“primary”>Register</button
The tiny setting I referred to in the button stack but if you are defining the class in the offsite page you need a class="button tiny" - the primary that you already have is fine, that defines the primary color scheme as set in site styles, so just add the classes button and tiny and you should get a button the same size as in my screenshot.
Tav
Thanks again, tried to add but no luck. I typed:
button class=“button tiny””primary”>Register</button with the brackets.
Is there a resource to just use the “button” stack in the top nav, can’t seem to place it into the actual bar it will only let me drag below the partial top nav bar
Thanks
Your class names should together within one set of quotation marks.
If you want to do it as per the demo page (and use a page title as the name in the menu) then your page name would be as follows:
<button class="tiny">Register</button>
You do not actually need to define the default class (as it is, well, the default 
)
The tiny class will make the button the same height as the other menu items and it should look something like this
Tav, thanks. I have deleted page and redone using your code but still can’t seem to pull it off. Frustrating to be stuck on such and elementary issue. Here is a screen shot of nav bar
Ok, I see the problem now - it is because your TopBar is of increased height - mine was at the default of 45px.
You can remedy this simply by adding the following css to your site-wide code (you may need to play with the pixel padding slightly to get it perfectly aligned:
.top-bar-section ul.right li.not-click.has-form { padding-top:8px!important; }
Tav
Nailed it!
Thanks so much for your insight and patience (and snippet:)
much appreciated
Ian
My pleasure - glad you got it sorted.