Question 44163 in Html Question posted in
Some basic documentation can be found here.

Stop Horizontal Scroll – All pages – Html

Here is my website: https://rustinpeace.io

In mobile view, I have a navigational link that has negative margins. It displays when touching a button.
My issue is this is causing my mobile view to horizontally scroll.

Is there a way I can keep the navigational bar with negative margins and stop horizontal scrolling?

This is the first time I’ve built a website

@media(max-width: 800px){
  html{
  overflow-x:auto !important;
  }
  body{
  overflow-x:auto !important;
  }

The above has no effect.

Tags:

2

Answers


  1. 0

    Instead of using

    @media(max-width: 800px){
  html{
  overflow-x:auto !important;
  }
  body{
  overflow-x:auto !important;
  }

    Just use overflow:hidden

    @media(max-width: 800px){
body{
  overflow:hidden;
   }
 }

    this should work .

    Login or Signup to reply.
  2. 0

    Leave the overflow on the body alone; just keep the default styles from the browser.

    Since the nav’s parent element is already 100vh tall, the easiest solution is to simply control the overflow on that element. I have put together a simplified version of your code below as a demo.

    var navLinks = document.getElementById("navLinks")

function showMenu() {
  navLinks.style.right = "0";
}

function hideMenu() {
  navLinks.style.right = "-200px";
}
    body {
  max-width: 400px;
  border: 2px solid black;
}

* {
  box-sizing: border-box;
}

.header {
  position: relative;
  min-height: 100vh;
  overflow: hidden; /* add this */
}

.nav-links {
  background-color: cadetblue;
  position: absolute;
  top: 0;
  right: -200px;
  padding: 20px;
  height: 100vh;
  width: 200px;
  z-index: 2;
  transition: 1s;
}

.nav-links a {
  color: white;
}

section:not(:first-child) {
  padding: 20px;
  min-height: 300px;
}

section:nth-child(2) {
  background-color: gold;
}

section:nth-child(3) {
  background-color: firebrick;
}
    <html>
<body>
  <section class="header">
    <nav>
      <div class="nav-links" id="navLinks">
        <!-- use a real button; put your icon inside it -->
        <button onclick="hideMenu()" type="button">close</button>
        <ul>
          <li><a href="/page-1">Page 1</a></li>
          <li><a href="/page-2">Page 2</a></li>
          <li><a href="/page-3">Page 3</a></li>
          <li><a href="/page-4">Page 4</a></li>
        </ul>
      </div>
    </nav>
    <!-- use a real button; put your icon inside it -->
    <button onclick="showMenu()" type="button">open</button>
  </section>
  <section>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras auctor neque velit, non tempus lacus molestie non. Vivamus urna tortor, posuere et nibh et, euismod porta leo.</p>
  </section>
  <section>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras auctor neque velit, non tempus lacus molestie non. Vivamus urna tortor, posuere et nibh et, euismod porta leo.</p>
  </section>
</body>
</html>

    One thing to note: in the event that someone is using a keyboard to navigate your site on these smaller screen sizes, you’re going to run into trouble with this nav design. As soon as someone hits the tab key, the browser is going to yoink the off-screen link into the viewport, which will totally mess up your JS logic. The solution to that problem is:

    1. Use actual <button> elements around your open/close icons, so they can be reached via the tab key.
    2. Give all the links within the nav tabindex="-1" while they are hidden, so the only thing a keyboard user can get to initially is the button to open the menu. When you click the open button, remove the tabindex attribute from the links, or update it to tabindex="0". Then put it back to tabindex="-1" when you close the menu.
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search