I've been working on a navbar that will scroll horizontally when it exceeds the width of its parent container.
It features a bottom border with a different color for the active link. Using a negative margin to overlap them works well, but as soon as I add overflow-x: auto;, the active color disappears.
If you'd like to see an example, check out my codepen here: https://codepen.io/scottknight/pen/aboxYZY
(try uncommenting the overflow-x property and watch the active border reappear)
<div class="container">
<div class="navbar">
<a href="#" class="navlink">Link One</a>
<a href="#" class="navlink active">Link Two</a>
<a href="#" class="navlink">Link Three</a>
<a href="#" class="navlink">Link Four</a>
<a href="#" class="navlink">Link Five</a>
<a href="#" class="navlink">Link Six</a>
<a href="#" class="navlink">Link Seven</a>
<a href="#" class="navlink">Link Eight</a>
<a href="#" class="navlink">Link Nine</a>
<a href="#" class="navlink">Link Ten</a>
</div>
</div>
.container {
width: 800px;
}
.navbar {
display: flex;
/* overflow-x: auto; */
border-bottom: solid;
border-bottom-width: 5px;
border-color: gray;
}
.navlink {
padding: 20px;
flex: none;
margin-bottom: -5px;
}
.navlink.active {
border-bottom: solid;
border-bottom-width: 5px;
border-color: red;
}