svg in the div still showing when the container height is 0

hey folks this is my code

<header className={`sticky top-0 z-[3] bg-white`}>
            <div className="flex justify-between px-16 py-4 h-0 bg-gradient-black-green">
                <div className="flex gap-4 items-center">
                    <span className="text-white">Contact Us: </span>
                    <Link to='tel:+918619641968' className="text-black"><Phone className="h-[1.5em]" /></Link>
                    <Link to='mailto:[email protected]' className="text-black"><Email className="h-[1.5em]" /></Link>
                    <Link to='/' className="text-black"><Download className="h-[1.5em]" /></Link>
                </div>
                <div className="flex items-center gap-4">
                    <span className="text-black">Follow Us: </span>
                    <Link to='' className="text-black"><Instagram className="h-[1.5em] w-auto" /></Link>
                    <Link to='' className="text-black"><Facebook className="h-[1.5em] w-auto" /></Link>
                    <Link to='' className="text-black"><Telegram className="h-[1.5em] w-auto" /></Link>
                    <Link to='' className="text-black"><Linkedin className="h-[1.5em] w-auto" /></Link>
                    <Link to='' className="text-black"><Youtube className="h-[1.5em] w-auto" /></Link>
                </div>
            </div>
        </header>

<header className={`sticky top-0 z-[3] bg-white`}>
            <div className="flex justify-between px-16 py-4 h-0 bg-gradient-black-green">
                <div className="flex gap-4 items-center">
                    <span className="text-white">Contact Us: </span>
                    <Link to='tel:+918619641968' className="text-black"><Phone className="h-[1.5em]" /></Link>
                    <Link to='mailto:[email protected]' className="text-black"><Email className="h-[1.5em]" /></Link>
                    <Link to='/' className="text-black"><Download className="h-[1.5em]" /></Link>
                </div>
                <div className="flex items-center gap-4">
                    <span className="text-black">Follow Us: </span>
                    <Link to='' className="text-black"><Instagram className="h-[1.5em] w-auto" /></Link>
                    <Link to='' className="text-black"><Facebook className="h-[1.5em] w-auto" /></Link>
                    <Link to='' className="text-black"><Telegram className="h-[1.5em] w-auto" /></Link>
                    <Link to='' className="text-black"><Linkedin className="h-[1.5em] w-auto" /></Link>
                    <Link to='' className="text-black"><Youtube className="h-[1.5em] w-auto" /></Link>
                </div>
            </div>
        </header>

i have set the height of div to 0 still the div content are showing why is it happening i have attached image when the div height is 0 and when its not

5 Replies

Chris Bolson•2y ago

Its due to the padding on the div

Aditya KiradOP•2y ago

i removed the padding still its showing

Chris Bolson•2y ago

Now try adding overflow-hidden to the div

Aditya KiradOP•2y ago

i know about that but can we use that with transition

Chris Bolson•2y ago

What is the issue that you have with transition?

Gaming

Programming

svg in the div still showing when the container height is 0