Scrollable menu moves up and down as well when i want it to only scroll sideways-CodePudding

My <nav> menu is supposed to only scroll to the side to view all the options however I noticed if you touch it with the cursor or especially your finger on iPhone in the browser it moves up and down and disappears sometimes. I don't know which property is causing this.

HTML:

<nav >
  <ul>
    <li><a href="#starters">STARTERS</a></li>
    <li><a href="#ramen">RAMEN</a></li>
    <li><a href="">MAZEMEN</a></li>
    <li><a href="">TSUKEMEN</a></li>
    <li><a href="">DESSERT</a></li>
    <li><a href="">RAMEN</a></li>
    <li><a href="">DINNER</a></li>
    <li><a href="">DRINKS</a></li>
  </ul>
</nav>

CSS:

.scrollmenu {
  background-color: rgba(255, 255, 255, 1);
  overflow: auto;
  white-space: nowrap;
  color: black;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  z-index: 100;
  max-width: 840px;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
}

.scrollmenu::-webkit-scrollbar {
  display: none;
}

.scrollmenu a,
li {
  display: inline-block;
  color: rgb(138, 138, 138);
  text-align: center;
  padding: 0px;
  text-decoration: none;
  font-weight: 600;
}

.scrollmenu p {
  display: inline-block;
  color: rgb(138, 138, 138);
  text-align: center;
  text-decoration: none;
}

.scrollmenu a:hover {
  color: black;
}

.scrollmenu a:active {
  color: black;
  text-decoration: underline;
}

ul {
  padding: 0;
  margin: 0;
}

nav li   li:before {
  content: " | ";
  padding: 20px;
}

so basically the menu is supposed to only scroll to the side so you can view all the options within your browser window

CodePudding user response：

It has a vertical scroll enabled by default, one of the possible solutions would be to disable it for the nav element via overflow-y: hidden;:

.scrollmenu {
  background-color: rgba(255, 255, 255, 1);
  overflow: auto;
  white-space: nowrap;
  color: black;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  z-index: 100;
  max-width: 840px;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  overflow-y: hidden;
}

.scrollmenu::-webkit-scrollbar {
  display: none;
}

.scrollmenu a,
li {
  display: inline-block;
  color: rgb(138, 138, 138);
  text-align: center;
  padding: 0px;
  text-decoration: none;
  font-weight: 600;
}

.scrollmenu p {
  display: inline-block;
  color: rgb(138, 138, 138);
  text-align: center;
  text-decoration: none;
}

.scrollmenu a:hover {
  color: black;
}

.scrollmenu a:active {
  color: black;
  text-decoration: underline;
}

ul {
  padding: 0;
  margin: 0;
}

nav li   li:before {
  content: " | ";
  padding: 20px;
}

<nav >
  <ul>
    <li><a href="#starters">STARTERS</a></li>
    <li><a href="#ramen">RAMEN</a></li>
    <li><a href="">MAZEMEN</a></li>
    <li><a href="">TSUKEMEN</a></li>
    <li><a href="">DESSERT</a></li>
    <li><a href="">RAMEN</a></li>
    <li><a href="">DINNER</a></li>
    <li><a href="">DRINKS</a></li>
  </ul>
</nav>