We use Shopify and in the past a dev has created a custom tabs class for us. Unfortunately, he’s no longer with us and I’m trying to modify it myself – without success. I’m a complete noob when it comes to flexbox & scss.
Here’s the scss:
ul.tabbies {
@extend %block;
@include overflow-touch;
@extend %unselectable;
@include flexbox();
@include flex-grow(1);
@include flex-shrink(0);
@include justify-content(flex-start);
@include align-items(stretch);
border-bottom-color: $tabs-border-bottom-color;
border-bottom-style: $tabs-border-bottom-style;
border-bottom-width: $tabs-border-bottom-width;
padding-left: 0;
margin-left: 0;
flex-direction: row;
flex-wrap: wrap;
a {
height: calc(100% + 1px);
align-items: flex-start;
}
a {
@include align-items(center);
border-bottom-color: $tabs-border-bottom-color;
border-bottom-style: $tabs-border-bottom-style;
border-bottom-width: $tabs-border-bottom-width;
color: $tabs-link-color;
@include flexbox();
@include justify-content(center);
margin-bottom: -#{$tabs-border-bottom-width};
padding: $tabs-link-padding;
padding-left: 0;
vertical-align: top;
&:hover {
border-bottom-color: $tabs-link-hover-border-bottom-color;
color: $tabs-link-hover-color;
}
}
li {
display: block;
margin-top: 0.25em;
width: min-intrinsic;
width: -webkit-min-content;
width: -moz-min-content;
width: min-content;
display: table-caption;
display: -ms-grid;
-ms-grid-columns: min-content;
&.active,
&.is-active {
a {
border-bottom-color: $tabs-link-active-border-bottom-color;
color: $tabs-link-active-color;
}
}
a.active,
a.is-active {
border-bottom-color: $tabs-link-active-border-bottom-color;
color: $tabs-link-active-color;
* {
color: $tabs-link-active-color;// Used to ensure headings get proper color set
}
}
}
}
I’m using html on the page to hard-code the tab structure e.g.
<!--Start tab labels-->
<ul class="tabbies">
<li><a class="active" href="https://balletassociation.myshopify.com/pages/reports-2001-alina-cojocaru">2001</a></li>
<li><a href="https://balletassociation.myshopify.com/pages/reports-2002-deborah-bull">2002</a></li>
<li><a href="https://balletassociation.myshopify.com/pages/reports-2003-gemma-bond">2003</a></li>
<li><a href="https://balletassociation.myshopify.com/pages/reports-2004-caroline-duprot">2004</a></li>
<li><a href="https://balletassociation.myshopify.com/pages/reports-2005-roberto-bolle">2005</a></li>
<li><a href="https://balletassociation.myshopify.com/pages/reports-2006-zoe-anderson">2006</a></li>
<li><a href="https://balletassociation.myshopify.com/pages/reports-2007-johanna-adams">2007</a></li>
<li><a href="https://balletassociation.myshopify.com/pages/reports-2008-deborah-bull">2008</a></li>
<li><a href="https://balletassociation.myshopify.com/pages/reports-2009-federico-bonelli">2009</a></li>
<li><a href="https://balletassociation.myshopify.com/pages/reports-2010-vanessa-fenton">2010</a></li>
<li><a href="https://balletassociation.myshopify.com/pages/reports-2011-camille-bracher">2011-2020</a></li>
<li><a href="https://balletassociation.myshopify.com/pages/reports-2020-jessica-clarke">2020-2030</a></li>
</ul>
<ul class="tabbies">
<li><a class="active" href="https://balletassociation.myshopify.com/pages/reports-2001-alina-cojocaru">Alina Cojocaru</a></li>
<li><a href="https://balletassociation.myshopify.com/pages/reports-2001-gailene-stock">Gailene Stock</a></li>
<li><a href="https://balletassociation.myshopify.com/pages/reports-2001-hubert-essakow">Hubert Essakow</a></li>
<li><a href="https://balletassociation.myshopify.com/pages/reports-2001-jenny-tattersall">Jenny Tattersall</a></li>
<li><a href="https://balletassociation.myshopify.com/pages/reports-2001-jenny-tattersall">Tom Sapsford</a></li>
</ul>
<!--End tab labels-->
Here’s a link to the page https://balletassociation.co.uk/pages/reports-2001-alina-cojocaru
What I’m trying to achieve is the top row all on a single line i.e. 2011-2020, 2021-2030 and not displayed on top of each other.
The bottom row is correct, with the dancer’s name on two rows.
Is it possible to do this? If so, can you point me in the right direction as everything I’ve tried so far has failed.
Thank you in advance
2
Answers
Try setting
flex-wraptonowrap. Although, note that currently your flexbox rows only wrap when the browser size is smaller than the minimum width of all of the elements anyways.How your site currently renders when the min size is smaller and forces a wrap.
As you can see, with flex-wrap set to no-wrap, you will get overflow/unreachable elements in your flexbox.
you can try this
copy this code into new project to see the result
it’s working for me