Implement Navigation from Cody House-Way to add background blur? - html

Question

I'm basically implementing this navigation from Cody House. For smaller screens <1000px, is there a way to have the nav .cd-morph-dropdown .morph-dropdown-wrapper have a width of 90% (instead of 100%) and have the background behind the nav blur? Basically have the area around the nav overlay to be blurred and have nav be clear.
Would the way around it be to apply the filter: blur(10px) to every div following the navigation via jquery? There has got to be a better approach.
NAV HTML
<nav class="main-nav">
<ul>
<li class="has-dropdown gallery" data-content="about">
About
</li>
<li class="has-dropdown links" data-content="pricing">
Pricing
</li>
<li class="has-dropdown button" data-content="contact">
Contact
</li>
</ul>
</nav>
<div class="morph-dropdown-wrapper">
<div class="dropdown-list">
<ul>
<li id="about" class="dropdown gallery">
About
<div class="content">
<ul>
<li>
<a href="#0">
<em>Title here</em>
<span>A brief description here</span>
</a>
</li>
<li>
<a href="#0">
<em>Title here</em>
<span>A brief description here</span>
</a>
</li>
<li>
<a href="#0">
<em>Title here</em>
<span>A brief description here</span>
</a>
</li>
<li>
<a href="#0">
<em>Title here</em>
<span>A brief description here</span>
</a>
</li>
</ul>
</div>
</li>
<li id="pricing" class="dropdown links">
Pricing
<div class="content">
<ul>
<li>
<h2>Services</h2>
<ul class="links-list">
<li>Logo Design</li>
<li>Branding</li>
<li>Web Design</li>
<li>iOS</li>
<li>Android</li>
<li>HTML/CSS/JS</li>
<li>Packaging</li>
<li>Mobile</li>
<li>UI/UX</li>
<li>Prototyping</li>
</ul>
</li>
<li>
<h2>Projects</h2>
<ul class="links-list">
<li>Logo Design</li>
<li>Branding</li>
<li>Web Design</li>
<li>iOS</li>
<li>Android</li>
<li>HTML/CSS/JS</li>
</ul>
</li>
</ul>
</div>
</li>
<li id="contact" class="dropdown button">
Contact
<div class="content">
<ul class="links-list">
<li>Link #1</li>
<li>Link #2</li>
<li>Link #3</li>
<li>Link #4</li>
<li>Link #5</li>
<li>Link #6</li>
</ul>
Get in Touch
</div>
</li>
</ul>
<div class="bg-layer" aria-hidden="true"></div>
</div> <!-- dropdown-list -->
</div> <!-- morph-dropdown-wrapper -->
</header>
<main class="cd-main-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ultrices malesuada scelerisque. Vivamus placerat dignissim eros ut sollicitudin. Suspendisse potenti. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse ut tellus euismod, sagittis enim eu, luctus tortor. Cras eros urna, maximus et arcu et, vehicula auctor erat. Aliquam laoreet dui eu magna mollis ornare ut in lectus. Proin nec sapien leo. Phasellus rhoncus risus sit amet mi tempus dignissim. Ut dictum faucibus ipsum, congue aliquet mauris laoreet vel. Suspendisse ultricies, libero a ullamcorper volutpat, erat nunc sagittis tellus, sit amet bibendum diam mi sed justo. Integer ac ex a felis pretium malesuada et condimentum nunc. Proin vitae mauris ex. Quisque consectetur metus et sagittis fringilla. Morbi pretium libero sed enim scelerisque, accumsan venenatis ex consectetur.</p>
</main>
Edit: added a codepen here.