1

Trying to make a navbar that toogles from right to left.

  <nav className={sidebar ? "nav-menu active" : "nav-menu"}>
    <ul className="nav-menu-items">
      <li className="navbar-toggle">
        <button className="menu-bars" onClick={() => setSidebar(!sidebar)}>
          <AiIcons.AiOutlineClose />
        </button>
      </li>
      {SidebarData.map((item, index) => (
        <li key={index} className={item.cName}>
          <a tabindex="0" href={item.path}>
            {item.icon}
            <span>{item.title}</span>
          </a>
        </li>
      ))}
    </ul>
  </nav>

If I click on a button, we add the class .active

.nav-menu {
   background-color: #060b26;
   width: 250px;
   height: 100vh;
   position: absolute;
   top: 0;
   left: -100%;
   transition: 850ms;
}

.nav-menu.active {
   left: 0;
   transition: 350ms;
}

This CSS snippet above is working perfect. The navbar is hidden and no overflow in the page, I can't scroll horizontally.

However, changing left to right causes that I get horizontal scrollbar in the page where I can see my navbar list all the way at the right end. How can I hide the navbar to the right without having that overflow?

Zok
  • 355
  • 2
  • 15
  • See [Why doesn't the scroll bar appear even if it protrudes to the left?](https://stackoverflow.com/questions/60129873/why-doesnt-the-scroll-bar-appear-even-if-it-protrudes-to-the-left) for why left -100% doesn't cause a scrollbar. – Alohci Jun 06 '22 at 08:45

1 Answers1

0

This should fix it:

body, html {
    overflow-x:hidden;
}
Jonu
  • 41
  • 2