Display NavBar on top of each other in smaller screens

Question

For @media (mobile, tablets) only.

-Only when the Size of the Page gets smaller, on smaller screens besides PC!

I want to display my Logo on Top Middle, (when the screen gets smaller)
The NavBar under the Logo as a full Row,
And the Subscribe button on the Top-Right of the NavBar and Logo
(between them on the right side) but I can't seem to do it right!

I set up correctly everything on the PC Displays, but when it comes to "@media screen" I don't know what I'm doing wrong

Please help. Below is my code!
Note: I don't know if I should change the whole DIV or only the Nav for the effect to take place!

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -ms-overflow-style: scrollbar;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

@-ms-viewport {
  width: device-width;
}

body {
  height: 100vh;
  width: 100%;
  background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(../images/index_bg.jpg);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 20px;
  padding-left: 10%;
  padding-right: 10%;
}

@media screen and (max-width: 500px) {
  .hero {
    width: 100%;
    background: #F00;
    display: inline-block;
  }
  ul {
    list-style: none;
    width: 100%;
    background: #FF0;
  }
  li {
    float: left;
    margin-right: 10px;
    background: #FF0;
  }
  .button1 {
    position: absolute;
    display: inline-block;
    top: 70px;
    right: 10px;
  }
}

.logo {
  color: white;
  font-size: 28px;
}

.span1 {
  color: white;
  font-size: 20px;
  background-color: #ea1538;
  border-radius: 30px;
  padding: 5px 8px;
}

span {
  color: #ea1538;
}

nav ul li {
  list-style-type: none;
  display: inline-block;
  padding: 10px 20px;
}

nav ul li a {
  color: white;
  text-decoration: none;
  font-weight: bold;
  transition: 0.5s;
}

nav ul li a:hover {
  color: white;
  transition: 0.3s;
  border-radius: 30px;
  background-color: #ea1538;
  padding: 8px 12px;
}

#active {
  color: white;
  background: #ea1538;
  padding: 5px 8px;
  border-radius: 30px;
}

.button1 {
  border: none;
  background: #ea1538;
  padding: 12px 20px;
  border-radius: 30px;
  color: white;
  font-weight: bold;
  font-size: 15px;
  transition: 0.5s;
  text-align: center;
  color: white;
  text-decoration: none;
  font-weight: bold;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}

.button1:hover {
  transform: scale(1.2);
  transition: ease 0.5s;
  cursor: pointer;
}

.footer {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: -o-flex;
  display: flex;
  flex-flow: row wrap;
  padding: 50px;
  color: white;
  background: #262626;
}

.footer>* {
  flex: 1 100%;
}

.l-footer {
  margin-right: 1.25em;
  margin-bottom: 2em;
}

h2 {
  font-weight: 900;
  font-size: 16px;
}

.footer ul {
  list-style: none;
  padding-left: 0;
}

.footer li {
  line-height: 2em;
}

.footer a {
  text-decoration: none;
  transition: ease 0.3s;
}

.footer a:hover {
  background-color: #ea1538;
  padding: 3px 5px;
  border-radius: 30px;
  transition: ease 0.3s;
  color: white;
  font-weight: bold;
  letter-spacing: 0.5px;
}

.r-footer {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: -o-flex;
  display: flex;
  flex-flow: row wrap;
}

.r-footer>* {
  flex: 1 50%;
  margin-right: 1.25em;
}

.box a {
  text-decoration: none;
  color: #999;
}

.h-box {
  column-count: 2;
  column-gap: 1.25em;
}

.b-footer {
  text-align: center;
  color: #999;
  padding-top: 50px;
}

.l-footer p {
  padding-right: 20%;
  color: #999;
}

@media screen and (min-width: 600px) {
  .r-footer>* {
    flex: 1;
  }
  .features {
    flex-grow: 2;
  }
  .l-footer {
    flex: 1 0px;
  }
  .r-footer {
    flex: 2 0px;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <script src="https://kit.fontawesome.com/0c0d062607.js" crossorigin="anonymous"></script>
  <link rel="icon" type="images" href="/images/favicon.ico" />
  <link rel="stylesheet" href="Styles/style.css" />
  <link rel="preconnect" href="https://fonts.gstatic.com" />
  <link href="https://fonts.googleapis.com/css2?family=FAMILY_NAME:wght@WEIGHT_OR_RANGE&display=swap" rel="stylesheet" />

  <title>myPage</title>
</head>

<body>
  <!-- Navbar and Logo -->
  <div class="hero">
    <nav>
      <center>
        <h2 class="logo">
          Be <span>Smart</span> <br />
          <span class="span1">Technologies</span>
        </h2>
      </center>
      <ul>
        <li><a href="index.html" id="active">Home</a></li>
        <li><a href="portfolio.html">Portfolio</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
      <button type="button" class="button1">
              Subscribe
            </button>
    </nav>
  </div>
  <!-- Main Page Goes Below -->

  <!-- End Of Main Page-->

  <!-- BR Page Space (Give more space below) -->
  <div>
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  </div>
  <!-- Footer and Properties -->
  <footer class="footer">
    <div class="l-footer">
      <h1>
        Be <span>Smart</span> <br /><span class="span1">Technologies</span>
      </h1>
      <br />
      <p>
        Be Smart Technologies or <em>BST</em> is a company that creates websites, portfolios, responsive pages and designs! Feel free to join us and contact us if you have any questions or new ideas! You can be our next partner!
      </p>
    </div>
    <ul class="r-footer">
      <li>
        <h2>Explore</h2>
        <ul class="box">
          <li><a href="#bottom">Home</a></li>
          <li><a href="#bottom">Portfolio</a></li>
          <li><a href="#bottom">About</a></li>
          <li><a href="#bottom">Contact</a></li>
        </ul>
      </li>
      <li class="features">
        <h2>Need Help?</h2>
        <ul class="box h-box">
          <li><a href="#bottom">Blog</a></li>
          <li><a href="#bottom">Pricing</a></li>
          <li><a href="#bottom">Sales</a></li>
          <li><a href="#bottom">Certifications</a></li>
          <li><a href="#bottom">Customer Services</a></li>
        </ul>
      </li>
      <li>
        <h2>Legal</h2>
        <ul class="box">
          <li><a href="#bottom">Privacy Policy</a></li>
          <li><a href="#bottom">Terms of Use</a></li>
          <li><a href="#bottom">Contract</a></li>
        </ul>
      </li>
    </ul>

    <div class="b-footer">
      <p>All Rights Reserved by &copy;BeSmart Technologies 2022</p>
    </div>
  </footer>
</body>

</html>

Answer 1

You will want to set nav to flex-direction: column; to get the logo on top and the navbar to display full width underneath. Then you can position the button1 in the same media query.

See below:

@media screen and (max-width: 800px) {
  nav {
    flex-direction: column;
  }
  .button1 {
    position: absolute;
    display: inline-block;
    top: 30px;
    right: 10px;
  }
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -ms-overflow-style: scrollbar;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

@-ms-viewport {
  width: device-width;
}

body {
  height: 100vh;
  width: 100%;
  background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(../images/index_bg.jpg);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 20px;
  padding-left: 10%;
  padding-right: 10%;
}

.logo {
  color: white;
  font-size: 28px;
}

.span1 {
  color: white;
  font-size: 20px;
  background-color: #ea1538;
  border-radius: 30px;
  padding: 5px 8px;
}

span {
  color: #ea1538;
}

nav ul li {
  list-style-type: none;
  display: inline-block;
  padding: 10px 20px;
}

nav ul li a {
  color: white;
  text-decoration: none;
  font-weight: bold;
  transition: 0.5s;
}

nav ul li a:hover {
  color: white;
  transition: 0.3s;
  border-radius: 30px;
  background-color: #ea1538;
  padding: 8px 12px;
}

#active {
  color: white;
  background: #ea1538;
  padding: 5px 8px;
  border-radius: 30px;
}

.button1 {
  border: none;
  background: #ea1538;
  padding: 12px 20px;
  border-radius: 30px;
  color: white;
  font-weight: bold;
  font-size: 15px;
  transition: 0.5s;
  text-align: center;
  color: white;
  text-decoration: none;
  font-weight: bold;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}

.button1:hover {
  transform: scale(1.2);
  transition: ease 0.5s;
  cursor: pointer;
}

.footer {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: -o-flex;
  display: flex;
  flex-flow: row wrap;
  padding: 50px;
  color: white;
  background: #262626;
}

.footer>* {
  flex: 1 100%;
}

.l-footer {
  margin-right: 1.25em;
  margin-bottom: 2em;
}

h2 {
  font-weight: 900;
  font-size: 16px;
}

.footer ul {
  list-style: none;
  padding-left: 0;
}

.footer li {
  line-height: 2em;
}

.footer a {
  text-decoration: none;
  transition: ease 0.3s;
}

.footer a:hover {
  background-color: #ea1538;
  padding: 3px 5px;
  border-radius: 30px;
  transition: ease 0.3s;
  color: white;
  font-weight: bold;
  letter-spacing: 0.5px;
}

.r-footer {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: -o-flex;
  display: flex;
  flex-flow: row wrap;
}

.r-footer>* {
  flex: 1 50%;
  margin-right: 1.25em;
}

.box a {
  text-decoration: none;
  color: #999;
}

.h-box {
  column-count: 2;
  column-gap: 1.25em;
}

.b-footer {
  text-align: center;
  color: #999;
  padding-top: 50px;
}

.l-footer p {
  padding-right: 20%;
  color: #999;
}

@media screen and (min-width: 600px) {
  .r-footer>* {
    flex: 1;
  }
  .features {
    flex-grow: 2;
  }
  .l-footer {
    flex: 1 0px;
  }
  .r-footer {
    flex: 2 0px;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <script src="https://kit.fontawesome.com/0c0d062607.js" crossorigin="anonymous"></script>
  <link rel="icon" type="images" href="/images/favicon.ico" />
  <link rel="stylesheet" href="Styles/style.css" />
  <link rel="preconnect" href="https://fonts.gstatic.com" />
  <link href="https://fonts.googleapis.com/css2?family=FAMILY_NAME:wght@WEIGHT_OR_RANGE&display=swap" rel="stylesheet" />
  <title>myPage</title>
</head>
<body>
  <!-- Navbar and Logo -->
  <div class="hero">
    <nav>
      <center>
        <h2 class="logo">
          Be <span>Smart</span> <br />
          <span class="span1">Technologies</span>
        </h2>
      </center>
      <ul>
        <li><a href="index.html" id="active">Home</a></li>
        <li><a href="portfolio.html">Portfolio</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
      <button type="button" class="button1">
              Subscribe
            </button>
    </nav>
  </div>
  <!-- Main Page Goes Below -->

  <!-- End Of Main Page-->

  <!-- BR Page Space (Give more space below) -->
  <div>
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  </div>
  <!-- Footer and Properties -->
  <footer class="footer">
    <div class="l-footer">
      <h1>
        Be <span>Smart</span> <br /><span class="span1">Technologies</span>
      </h1>
      <br />
      <p>
        Be Smart Technologies or <em>BST</em> is a company that creates websites, portfolios, responsive pages and designs! Feel free to join us and contact us if you have any questions or new ideas! You can be our next partner!
      </p>
    </div>
    <ul class="r-footer">
      <li>
        <h2>Explore</h2>
        <ul class="box">
          <li><a href="#bottom">Home</a></li>
          <li><a href="#bottom">Portfolio</a></li>
          <li><a href="#bottom">About</a></li>
          <li><a href="#bottom">Contact</a></li>
        </ul>
      </li>
      <li class="features">
        <h2>Need Help?</h2>
        <ul class="box h-box">
          <li><a href="#bottom">Blog</a></li>
          <li><a href="#bottom">Pricing</a></li>
          <li><a href="#bottom">Sales</a></li>
          <li><a href="#bottom">Certifications</a></li>
          <li><a href="#bottom">Customer Services</a></li>
        </ul>
      </li>
      <li>
        <h2>Legal</h2>
        <ul class="box">
          <li><a href="#bottom">Privacy Policy</a></li>
          <li><a href="#bottom">Terms of Use</a></li>
          <li><a href="#bottom">Contract</a></li>
        </ul>
      </li>
    </ul>
    <div class="b-footer">
      <p>All Rights Reserved by &copy;BeSmart Technologies 2022</p>
    </div>
  </footer>
</body>
</html>

Answer 2

As the comment from Kameron states, not really clear how it supposed to look. But I have given it a try.

/*@media screen and (max-width: 500px) {*/
  .hero {
    width:100%;
    background:#F00;
    display: inline-block;
  }
  ul {
    list-style:none;
    width:100%;
    background:#FF0;
  }
  li {
    float:left;
    margin-right:10px;
    background:#FF0;
  }
  .button1 {
    position:absolute;
    display:inline-block;
    top:70px;
    right:10px;
  }
/*}*/

<div class="hero">
  <nav>
    <center><h2 class="logo">
      Be <span>Smart</span> <br />
      <span class="span1">Technologies</span>
    </h2></center>
    <ul>
      <li><a href="index.html" id="active">Home</a></li>
      <li><a href="portfolio.html">Portfolio</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
    <button type="button" class="button1">
      Subscribe
    </button>
  </nav>
</div>