Menu icon Foundation
How to create custom fixed-width buttons in Foundation 5 using button-group-style mixin

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

         

buttonscustombutton bar

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