I'm encountering an issue with my navbar where it gets distorted when the window size is too small. How can I make it shrink proportionally to fit the page? I've attempted several solutions, but they only reduce the text size without properly resizing the navbar.
Below is the HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>
<body>
<header id="nav-wrapper">
<nav id="nav">
<div class="nav left">
<span class="gradient skew">
<h1 class="logo un-skew"><a href="#home">RiseUpOnario.ca</a></h1>
</span>
<button id="menu" class="btn-nav"><span class="fas fa-bars"></span></button>
</div>
<div class="nav right">
<a href="#home" class="nav-link active"><span class="nav-link-span"><span class="u-nav">Home</span></span></a>
<a href="#blog" class="nav-link"><span class="nav-link-span"><span class="u-nav">Blog</span></span></a>
<a href="#join" class="nav-link"><span class="nav-link-span"><span class="u-nav">Join</span></span></a>
<a href="#donate" class="nav-link"><span class="nav-link-span"><span class="u-nav">Donate</span></span></a>
<a href="#mppfiner" class="nav-link"><span class="nav-link-span"><span class="u-nav">MPP Finder</span></span></a>
<a href="#aboutus" class="nav-link"><span class="nav-link-span"><span class="u-nav">About Us</span></span></a>
<a href="#contact" class="nav-link"><span class="nav-link-span"><span class="u-nav">Contact</span></span></a>
</div>
</nav>
</header>
<main>
<section id="home">
</section>
<section id="blog">
</section>
<section id="join">
</section>
<section id="donate">
</section>
<section id="mppfinder">
</section>
<section id="aboutus">
</section>
<section id="contact">
</section>
</main>
</body>
</html>
<style>
/* Your custom CSS goes here */
</style>
<script>
// Your JavaScript code goes here
</script>