Making my navbar scale with a resized window-CodePudding

I'm trying to learn how to make a responsive navbar. I have managed to get the bar itself to resize depending on monitor resolution but the buttons don't resize with it.

Ive tried using %, vm and vh, but I don't believe this is the correct solution or I'm implementing it incorrectly. Here's my CSS.

Thanks in advance.

#topnav {
     width: 100vw;
     height:10vh;
     position: fixed;
     top: 0;
     right: 0;
     background-color: Black;
     font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
     font-size: 20px;
     float: right;
     display: flex;
     justify-content: space-between;
    
}
 .nav-link-container {
     display: flex;
     align-content: center 
}
 #logo {
     width: 300px;
     background-color: black;
     font-weight: bold;
     color: green;
     float: left;
}
 .nav-link {
     display: block;
     padding: 1em;
     color: green;
     text-align: center;
     line-height: 60px;
     text-decoration: none;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Lochquarry Outdoor Centre</title>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <nav id="topnav">
      <a id="logo"  href="index.html">Lochquarry Outdoor Centre</a>
      <div >
        <a  href="#">News</a>
        <a  href="#">About</a>
        <a  href="#">Area info</a>
      </div>
    </nav>
      
    <div>
      <img  src="media/home_page_pic.jpg" width="800"/>
    </div>
      
  </body>
</html>

CodePudding user response：

Try this:

* {
  box-sizing: border-box;
}

body {
  margin: 0px;
  font-family: 'segoe ui';
}

.nav {
  height: 50px;
  width: 100%;
  background-color: black;
  position: relative;
}

.nav > .nav-header {
  display: inline;
}

.nav > .nav-header > .nav-title {
  display: inline-block;
  font-size: 22px;
  color: #fff;
  padding: 10px 10px 10px 10px;
}

.nav > .nav-btn {
  display: none;
}

.nav > .nav-links {
  display: inline;
  float: right;
  font-size: 18px;
}

.nav > .nav-links > a {
  display: inline-block;
  padding: 13px 10px 13px 10px;
  text-decoration: none;
  color: #efefef;
}

.nav > .nav-links > a:hover {
  background-color: rgba(0, 0, 0, 0.3);
}

.nav > #nav-check {
  display: none;
}

@media (max-width:600px) {
  .nav > .nav-btn {
    display: inline-block;
    position: absolute;
    right: 0px;
    top: 0px;
  }
  .nav > .nav-btn > label {
    display: inline-block;
    width: 50px;
    height: 50px;
    padding: 13px;
  }
  .nav > .nav-btn > label:hover,.nav  #nav-check:checked ~ .nav-btn > label {
    background-color: rgba(0, 0, 0, 0.3);
  }
  .nav > .nav-btn > label > span {
    display: block;
    width: 25px;
    height: 10px;
    border-top: 2px solid #eee;
  }
  .nav > .nav-links {
    position: absolute;
    display: block;
    width: 100%;
    background-color: #333;
    height: 0px;
    transition: all 0.3s ease-in;
    overflow-y: hidden;
    top: 50px;
    left: 0px;
  }
  .nav > .nav-links > a {
    display: block;
    width: 100%;
  }
  .nav > #nav-check:not(:checked) ~ .nav-links {
    height: 0px;
  }
  .nav > #nav-check:checked ~ .nav-links {
    height: calc(100vh - 50px);
    overflow-y: auto;
  }
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Lochquarry Outdoor Centre</title>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <div >
      <input type="checkbox" id="nav-check">
      <div >
        <div >
          Lochquarry Outdoor Centre
        </div>
      </div>
      <div >
        <label for="nav-check">
          <span></span>
          <span></span>
          <span></span>
        </label>
      </div>
      
      <div >
        <a href="#">News</a>
        <a href="#">About</a>
        <a href="#">Area info</a>
      </div>
    </div>      

  </body>
</html>

CodePudding user response：

you can set when your button should resize with @media (max-width: //your screen width here//){ } and then put font-size: //your size here// to resize your button. with @media (max-width: //your screen width here//){ } you can use css under certain condition, say when your monitor width is 390 pixel wide (width of a iphone 14), then this button has a size of 23 px/1.4 rem

hope i could help you