I attempted to implement a CSS style that targets a child element of the body based on the active state of another div class.
Here is the HTML structure:
<body class="restrict-body-scroll">
<div class="main-wrapper">
<div class="global-banner hide">GLOBAL BANNER ITEM HERE</div>
<div class="alter-banner hide">ALTER BANNER ITEM HERE</div>
<header class="header">
<div class="item-left"></div>
<div class="item-center"></div>
<div class="item-right">
<div class="overlay">
<div class="overlay-container">
<h3>Welcome Guest!</h3>
</div>
</div>
</div>
</header>
</div>
</body>
This is the CSS code I tried to use:
.global-banner.hide {
display: none !important;
}
.global-banner .item-right .overlay-container {
height: 0;
}
body.restrict-body-scroll .global-banner.hide + .header .item-right .overlay-container.active {
height: 100vh;
}
Unfortunately, it seems like this implementation is not functioning as expected!