How to have my css navbar be proportional to the page

My (epic) navbar gets messed up when the window is to small, how can I have it shrink proportionally to the page? I've tried a few things but it just shrinks the text size, but the text still ends up longer than the width of the window, with the title in the top left overlapping onto the text.
Here is the html:
<!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>
/*-------------Reset-------------*/
button {
  background: none;
  box-shadow: none;
  border: none;
  cursor: pointer;
}

button:focus,
input:focus {
  outline: 0;
}

html {
  scroll-behavior: smooth;
}

/*-------------Layout-------------*/
body {
  line-height: 1.5em;
  padding: 0;
  margin: 0;
}

section {
  height: 100vh;
}

#home {
  background-color: #ddd;
}

#blog {
  background-color: #aaa;
}

#join {
  background-color: #888;
}

#donate {
  background-color: #666;
}

#mppfinder {
  background-color: #ddd;
}

#aboutus {
  background-color: #aaa;
}

#contact {
  background-color: #666;
}

/*-------------Helpers-------------*/
.skew {
  transform: skew(-20deg);
}

.un-skew {
  transform: skew(20deg);
}

/*-------------Nav-------------*/
#nav-wrapper {
  overflow: hidden;
  width: 100%;
  margin: 0 auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
}

#nav {
  background-color: #fff;
  box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  font-family: "Saira Semi Condensed", sans-serif;
  height: 4em;
  overflow: hidden;
}
#nav.nav-visible {
  height: 100%;
  overflow: auto;
}

.nav {
  display: flex;
  height: 4em;
  line-height: 4em;
  flex-grow: 1;
}

.nav-link,
.logo {
  padding: 0 1em;
}

span.gradient {
  background: #e9b1a7;
  background: -webkit-linear-gradient(45deg, #e9b1a7, #cf0a0a);
  background: linear-gradient(45deg, #e9b1a7, #cf0a0a);
  padding: 0 1em;
  position: relative;
  right: 1em;
  margin-right: auto;
}
span.gradient:hover {
  animation-name: logo-hover;
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.17, 0.57, 0.31, 0.85);
}

h1.logo {
  font-weight: 300;
  font-size: 1.75em;
  line-height: 0.75em;
  color: #fff;
}

h1.logo a, a:active, a:hover, a:visited {
  text-decoration: none;
  color: #fff;
}

.nav-link {
  text-transform: uppercase;
  text-align: center;
  border-top: 0.5px solid #ddd;
}

a:link, a:visited, a:active {
  text-decoration: none;
  color: #e9b1a7;
}

a:hover {
  text-decoration: underline;
}

.right {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.btn-nav {
  color: #e9b1a7;
  padding-left: 2em;
  padding-right: 2em;
}

@media (min-width: 800px) {
  #nav-wrapper {
    overflow: hidden;
  }

  #nav {
    overflow: hidden;
    flex-direction: row;
  }

  .nav-link {
    border-top: none;
  }

  .right {
    overflow: hidden;
    flex-direction: row;
    justify-content: flex-end;
    position: relative;
    left: 1.5em;
    height: auto;
  }

  .btn-nav {
    display: none;
  }

  .nav a:link.active, a:visited.active, a:active.active {
    background: #e9b1a7;
    background: -webkit-linear-gradient(45deg, #e9b1a7, #cf0a0a);
    background: linear-gradient(45deg, #e9b1a7, #cf0a0a);
    color: #fff;
  }

  .nav-link-span {
    transform: skew(20deg);
    display: inline-block;
  }

  .nav-link {
    transform: skew(-20deg);
    color: #777;
    text-decoration: none;
  }
  .nav-link:last-child {
    padding-right: 3em;
  }

  a:hover.nav-link:not(.active) {
    color: #444;
    background: #ddd;
    background: linear-gradient(45deg, #fff, #ddd);
  }
}
@keyframes logo-hover {
  20% {
    padding-right: 0em;
  }
  100% {
    padding-right: 5em;
  }
}
</style>




<script>
var util = {
  mobileMenu() {
    $("#nav").toggleClass("nav-visible");
  },
  windowResize() {
    if ($(window).width() > 800) {
      $("#nav").removeClass("nav-visible");
    }
  },
  scrollEvent() {
    var scrollPosition = $(document).scrollTop();

    $.each(util.scrollMenuIds, function (i) {
      var link = util.scrollMenuIds[i],
        container = $(link).attr("href"),
        containerOffset = $(container).offset().top,
        containerHeight = $(container).outerHeight(),
        containerBottom = containerOffset + containerHeight;

      if (
        scrollPosition < containerBottom - 20 &&
        scrollPosition >= containerOffset - 20
      ) {
        $(link).addClass("active");
      } else {
        $(link).removeClass("active");
      }
    });
  }
};

$(document).ready(function () {
  util.scrollMenuIds = $("a.nav-link[href]");
  $("#menu").click(util.mobileMenu);
  $(window).resize(util.windowResize);
  $(document).scroll(util.scrollEvent);
});

</script>
How to have my css navbar be proportional to the page

2 Answers
