Foundation
-
FollowReplies
-
How to create custom fixed-width buttons in Foundation 5 using button-group-style mixin
byErik Fullerton Tuesday, February 04, 2014 at 9:27 AM EST
I'm trying to create a custom button bar centered within a row using Foundation 5 mixins, where the buttons are of the same width based off the size of the largest button in the group. In the vanilla version just adding even-4 to the class would do it, but I cant seem to get the syntax correct for the custom button bar. With the code below I get a button bar exactly how I want except the widths are relative to the text rather than being fixed, what am I doing wrong?
HTML
<div class="small-12 small-centered columns">
<ul class="top-nav">
<li><a href="#" class="topnavbtn">Instructions</a></li>
<li><a href="#" class="topnavbtn">Glossary</a></li>
<li><a href="#" class="topnavbtn">Documents</a></li>
<li><a href="#" class="topnavbtn">Links</a></li>
</ul>
</div>
CSS
.top-nav {
@include button-group-container(true, false);
text-align:center;
.topnavbtn {
$button-border-width: 1px;
$button-border-style: solid;
@include button($button-tny, #c0ced7, false, false, false, false);
}
& > li {
@include button-group-style(true, 4);
display:inline-block;
float:none;
}
}
