'How to disable Horizontal scroll on a website NavBar with Bootstrap

I don't want to disable my horizonal scroll, I want it. Just that I want to remove scroll from certain elements like my NavBar, when I scroll, The Navbar also moves, and that makes it look ugly, I just want to enable horizontal scroll on a certain part of my site, (For Ex: A Table)

For Ref: Normal

When Scrolled Right

htmlcssfrontendbootstrap-5


Solution 1:[1]

Disable scrolling on html/body and add it to your table like below

table {
  display: block;
  width: 100%; /* Needs to be adjusted accordingly */
  overflow-x: auto;
}

Solution 2:[2]

Use tag in css overflow-x: hidden;

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Nitin Kumar
Solution 2 Asad Ali

Related Questions