Edit
/* scss/6-page-content-elements/_horiz-nav.scss */
#content-nav > ul {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
width: 100%;
margin: 0;
margin: kspaces(sm) 1px kspaces(lg) 0;
padding: 0;
//max-width: 800px;
}
#content-nav > ul > li {
@include content-button-styles;
display: flex;
align-items: center;
flex-basis: 33%;
flex-grow: 1;
flex-shrink: 0;
flex-wrap: nowrap;
justify-content: center;
margin: 0 1px 1px 0;
padding: 0;
list-style: none;
text-align: center;
@include breakpoint(400px) {
flex-basis: 10%;
flex-grow: 1;
flex-shrink: 1;
}
@include breakpoint($mobile-to-desktop-breakpoint) {
display: flex;
}
& a {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
padding: 14px;
font-size: toRem(13);
}
// for 4 and 5 button navs, make into grid on mobile
&:nth-last-child(4):first-child,
&:nth-last-child(4):first-child ~ li,
&:nth-last-child(5):first-child,
&:nth-last-child(5):first-child ~ li {
flex-basis: 49%;
flex-grow: 0;
flex-shrink: 0;
@include breakpoint($mobile-to-wide-mobile-breakpoint) {
flex-basis: 10%;
flex-grow: 1;
flex-shrink: 1;
}
}
}
#content-nav li a {
vertical-align: middle;
text-decoration: none;
color: #ffffff;
font-size: 12px;
}