-
Replies
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; } }