'backgound same as body for fixed component or transparent backgound without showing the element below/under
The fixed component is the dropdown menu which have fixed class and z index of 50.

Currently, it has white background and I want to change it so it has same backgound as the body. Why I don't use transparent backgound? because it will show the content below.
note: the backgound of the body is linear gradient
botnav
<div id="botnav" className={`${isOpen ? 'h-40' : 'h-0'}
px-10
md:hidden
flex flex-col justify-center
transition-all duration-300 ease
fixed
bg-white
z-50
w-full
`}>
{
menu.map((item, index) => {
return (
<Link href={item.link} key={index} className="">
<a onClick={toogleMenu} className={`${router.pathname == item.alias ? 'text-black font-bold' : 'text-grey'} overflow-hidden transition-none sm:text-primary w-full py-1 text-black font-bold items-center justify-center border-none `}>
{item.name}
</a>
</Link>
)
})
}
</div>
body
the body is a regullar body tag and I set the bg with use effect
useEffect(() => {
const bodybg = {
'/': 'bg-grad-lblue',
'/diary': 'bg-grad-lred',
'/askme': 'bg-grad-lyellow',
'/contact': 'bg-grad-leftblue'
}
document.body.className = bodybg[router.pathname]
}, [router.pathname])
background class
.bg-grad-lred {
background: linear-gradient(302.02deg, #FFB1B5 -43.05%, #FFFFFF 75.37%);
}
.bg-grad-lblue{
background: linear-gradient(311.76deg, #D4E7FE -15.24%, #FFFFFF 78.85%);
}
.bg-grad-lyellow{
background: linear-gradient(127.05deg, #FFD085 -4.39%, #FFFFFF 73.98%);
}
.bg-grad-leftblue{
background: linear-gradient(77.58deg, #D4E7FE 1.34%, #FFFFFF 100%);
}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
