Hey there! Currently, I am facing a challenge involving the implementation of CSS grid.
The only issue remaining is making the top menu, which has a fixed width of 520px and a fixed position, scrollable horizontally on smaller devices. Could you provide some advice?
Despite trying overflow-x:auto;, it seems to not be effective in this particular case...
<!--html-->
<main>
<div class="main-menu-container">
<ul class="main-menu">
<li class="main-menu__item"><a href="#" class="main-menu__link js-display-grid-items" >ALL</a></li>
<li class="main-menu__item"><a href="#" class="main-menu__link js-display-grid-items" data-griditem="a">A</a></li>
<li class="main-menu__item"><a href="#" class="main-menu__link js-display-grid-items" data-griditem="b">B</a></li>
<li class="main-menu__item"><a href="#" class="main-menu__link js-display-grid-items"data-griditem="c">C</a></li>
<li class="main-menu__item"><a href="#" class="main-menu__link js-display-grid-items" data-griditem="d">D</a></li>
<li class="main-menu__item"><a href="#" class="main-menu__link js-display-grid-items" data-griditem="e">E</a></li>
</ul>
</div>
<section class="main-grid">
<article class="main-grid__item main-grid__item--type-a is-visible">A</article>
<article class="main-grid__item main-grid__item--type-c is-visible">C</article>
<article class="main-grid__item main-grid__item--type-b is-visible">B</article>
<article class="main-grid__item main-grid__item--type-e is-visible">E</article>
<article class="main-grid__item main-grid__item--type-b is-visible">B</article>
<article class="main-grid__item main-grid__item--type-d is-visible">D</article>
<article class="main-grid__item main-grid__item--type-a is-visible">A</article>
<article class="main-grid__item main-grid__item--type-b is-visible">B</article>
<article class="main-grid__item main-grid__item--type-c is-visible">C</article>
<article class="main-grid__item main-grid__item--type-d is-visible">D</article>
<article class="main-grid__item main-grid__item--type-a is-visible">A</article>
<article class="main-grid__item main-grid__item--type-e is-visible">E</article>
</section>
</main>
<script src="js/site.js" type="text/javascript" ></script>
CSS:
body {
padding: 0;
margin:0;
}
main {
max-width: 940px;
margin: 0 auto;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
position: relative;
padding: 0 15px;
box-sizing:border-box;
}
.main-menu-container {
position: fixed;
width: 910px;
top:0;
float:left;
height: 40px;
}
.main-menu {
display: grid;
list-style: none;
grid-template-columns: repeat(6, 1fr);
grid-gap: 20px;
padding: 0;
overflow-x: auto;
margin:0;
padding: 1em 0;
background: #fff;
width: 100%;
height: 100%;
}
.main-menu__link {
display: block;
text-align: center;
padding:0.4em;
background-color: #9A9B9E;
color: #fff;
text-decoration: none;
}