i'm trying to use css to control my pages' parent body class when the class '.overlay-scale.open' is active on the page. 'overlay-scale.open' is active when an overlay is open on the page. When that overlay is active I want to stop the body from scrolling.
I gave it a go myself but it doesnt seem to be working. Trying to figure out if this is possible or another way to do it!?
My html:
<!doctype html>
<html>
<head>
</head>
<body class="blog">
<div id="wrapper" class="container">
<section class="full_width row">
<div class="d1-d5 sidebar">
<ul>
<li class="group"><a class="global_btn" id="trigger-s-overlay">All articles</a></li>
</ul>
</div>
<div class="d6-d12 content_body">
<h2>Hi Ray, for those who are unaware would you care to introduce yourself?</h2>
<p>Content</p>
</div>
</section>
<div class="s-overlay overlay-scale search_overlay">
<article class="d4-d6 t3-t4 m3-m4 entry">
stuff
</article>
</div>
</section>
</div>
My CSS:
.overlay-scale.open body.blog{
overflow: hidden !important;
}
