'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>

Solution 1:^[1]

Try implementing % in your stylesheet for fonts and divs! For example, if you want a line of text or a container within a container to adjust in size when the parent container shrinks, you can have your interior elements set to something like

elementName{ max-width: 75%}

See if that helps with some of the elements inside the navWrapper.

Solution 2:^[2]

Set the navbar's height to 10vh or less/more. ##vh = ##% of display height. There is also 100vw. = ##% of display width.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	DylanB
Solution 2	aWebDesigner123

'How to have my css navbar be proportional to the page

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]