CODEWITHSUNDEEP
reactjstailwind-css
Khalboy
Khalboy

Reputation: 11

How can i position my div fixed to the screen using tailwind and react?

<div className="md:hidden relative">
            <div className="md:hidden pr-7 bg-white text-left w-[60%] pb-[400px] fixed top-0 left-0">
            <CloseIcon className="text-black absolute right-4 top-5 w-5 "/>
            <ul className="pt-16 pl-3">
                <li className="text-black"><a className="hover:text-primary visited:text-black" href="#home">HOME</a></li>
                <li className="text-white"><a className="hover:text-primary visited:text-black" href="#about">ABOUT</a></li>
                <li className="text-white"><a className="hover:text-primary visited:text-black" href="#skills">SKILLS</a></li>
                <li className="text-white"><a className="hover:text-primary visited:text-black" href="#projects">PROJECTS</a></li>
                <li className="text-white"><a className="hover:text-primary visited:text-black" href="#contact">CONTACT</a></li>
            </ul>
            </div>

I'm trying to position my div fixed to the left side of the screen but whenever i scroll the div still moves.

enter image description here

Upvotes: 0

Views: 1789

Answers (1)

L. Letovanec
L. Letovanec

Reputation: 615

What you want is to use sticky instead of fixed. Together with top-0 left-0 it should stay on it's position even on scroll.

Upvotes: 1

Related Questions