I've been working on a dynamic timeline design that adapts to different screen sizes. I applied overflow-x property to prevent horizontal scrolling in the mobile version, making the burger menu's sub-items visible without requiring a click. However, this adjustment caused the circles on my timeline to be cut in half. I'm looking for a solution that allows me to maintain full circles while still preventing horizontal scrolling. Any suggestions?
*{
margin: 0;
padding: 0;
font-family: 'Noto Sans', sans-serif;
overflow-x: hidden;
}
.CV{
width: 80%;
margin: auto;
padding-top: 20px;
padding-bottom: 30px;
}
.sub-header{
height: 50vh;
width: 100%;
background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(assets/cv-sub.jpg);
background-position: center;
background-size: cover;
text-align: center;
color: #fff;
}
.sub-header h1{
margin-top: 50px;
}
.timeline{
position: relative;
margin: 50px auto;
padding: 40px 0;
width:100%;
}
...
</section>
<!--Javascript for Toggle Menu-->
<script>
var navLinks = document.getElementById("navLinks");
function showMenu(){
navLinks.style.right = "0";
}
function hideMenu(){
navLinks.style.right = "-200px";
}
</script>
</body>
</html>