CODEWITHSUNDEEP
reactjstailwind-css
Light
Light

Reputation: 1

My Tailwind CSS-styled navbar will not scroll horizontally, it only scrolls a tiny bit vertically

My navbar will not scroll horizontally, it only scrolls a tiny bit vertically. I'm using the tailwind-scrollbar-hide plugin and added it to my config file.

Screenshot

    import requests from "../utils/requests";
    
    function Nav() {
      return (
      <nav className="relative">
        <div className="flex px-10 sm:px-20 text-2xl whitespace-nowrap
         space-x-10 sm:space-x-20 overflow-x-scroll overflow-y-hidden scrollbar-hide">
            {Object.entries(requests).map(([key, { title, url }]) => (
              <h2 
              key={key} 
              className="last:pr-24 cursor-pointer transition duration-100 transform hover:scale-125 hover:text-white
              active:text-red-500 "
              >
                {title}
              </h2>
            ))}
        </div>
        <div className="absolute top-0 right-0 bg-gradient-to-l from-[#06202A] h-10 w-1/12" />
      </nav>
      );
    }
    
    export default Nav;

Upvotes: 0

Views: 676

Answers (1)

hpertaia
hpertaia

Reputation: 112

The example you've provided scrolls horizontally. Here is the working code with minimal modifications and tailwind-scrollbar-hide plugin installed (see in config tab): https://play.tailwindcss.com/gCJb6kO4yP?file=config

Please note, you can't scroll horizontally just by scrolling the mouse wheel. You have to hold "shift" key while scrolling. This is a default behaviour (see https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_menu_hor_scroll).

Upvotes: 1

Related Questions