I’m working on creating a navigation bar that scrolls horizontally. So far, everything is going well. However, when a tab opens a dropdown menu, I want to disable vertical scrolling while keeping horizontal scrolling active. Oddly enough, scrolling is currently enabled in both directions.
The HTML and CSS code is provided below.
/* =========================== HEADER - NAVBAR =========================== */header { background-color: #fff; display: flex; justify-content: space-around; align-items: center; position: sticky; top: 0; z-index: 1000; border-bottom: 1px solid #e0e0e0; padding: 0.5rem 1rem; transition: width 0.5s ease, height 0.5s ease;}header img { width: 100px; height: 100px; gap: 0.5rem; transition: width 0.5s ease, height 0.5s ease;}nav { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-left: 1rem; box-sizing: border-box; max-width: 100%; /* overflow-x: auto; */ overflow-y: visible; overflow-x: scroll; position: relative; white-space: nowrap;}nav a { text-decoration: none; flex: 0 0 auto; scroll-snap-align: center; color: #000000; font-weight: 500; font-size: 1.4rem; /* Check here !!! */ text-align: center; padding: 0.5rem 0.5rem; transform: scale(0.8); transition: color 0.3s ease, border-bottom 0.3s ease; /* Additive attribute for no linked <a> */ /* border: none; */ cursor: pointer; /* outline: inherit; */}nav a:hover { color: #0066cc; border-bottom: 2px solid #00bfff;}nav a.active { color: #00bfff; border-bottom: 2px solid #00bfff;}/* =========================== REDUCING LOGO =========================== */header.scrolled { /* padding: 0.5rem 2rem; */ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);}header.scrolled img { width: 60px; height: 60px;}/* =========================== SCROLLABLE NAVBAR =========================== */@media (max-width: 768px) { nav { scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; } nav a { scroll-snap-align: center; font-size: 0.8rem; transform: scale(0.8); transition: transform 0.3s ease, opacity 0.3s ease; } nav a.active { opacity: 1; transform: scale(1.2); font-weight: 600; color: #0066cc; } nav::-webkit-scrollbar { display: none; }}.dropdown { display: flex; flex-direction: column; z-index: 2001; position: relative;}.dropdown:hover .dropdown-content { display: flex; flex-direction: column;}.dropdown-content { /* display: flex; */ /* flex-direction: column; */ width: 100%; text-align: left; display: none; background-color: #f9f9f9; position: absolute; z-index: 2002; top: 100%;}<header><img src="imgs/logo.png" alt="Logo"><nav><a href="#">Tab1</a><a href="#">Tab2</a><a href="#">Tab3</a><a href="#">Tab4</a><a href="#">Tab5</a><div class="dropdown"><a>TabDropDown▾</a><div class="dropdown-content"><a href="#">Option1</a><a href="#">Option2</a></div></div></nav></header>