Trying to get Navbar disappear when page shrinks - html

Question

I'm new to html and css and in my class my teach wants us to make a resume with bootstrap. Obviously the whole point of bootstrap is to be interactive in switching between devices. Im trying to work on aligning stuff and i want my navbar to disappear when I shrink the page. How could I do that?
HTML
<!-- Bootstrap Import -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- Meta Tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Titile and Style -->
<title>CadenGS's Resume</title>
<link href="https://fonts.googleapis.com/css2?family=Saira+Extra+Condensed:wght#700&display=swap" rel="stylesheet">
<script src="script.js"></script>
<link rel="stylesheet" href="style.css" type="text/css">
<!-- Navbar on Side -->
<nav class="navbar navbar-expand-lg col-lg-2 flex-direction-column justify-content-center">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar List Items -->
<img id="pfp" src="Images/user_photo.jpg">
<br>
<ul class="navbar-nav f-flex flex-column">
<li class="nav-item active">
<a class="nav-link" href="#top">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#exp">Experience</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Education</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Skills</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Awards</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Examples</a>
</li>
</ul>
</nav>
<section>
<!-- Used To Scroll To Top of Page for Picture and About on Navbar -->
<p id="top">.</p>
<!-- Content Start -->
<div id="main" class="container margin-top-10%">
<h1 id="primaryName" class="display-2">Caden <span id="secondaryName">Serrato</span></h1>
<!-- Interactive Contacts -->
<p class="info" class="display-4"><em>
<a class="infoLink" onclick="call();">[phone]</a> · <a class="infoLink"
href="emailFiles/email.html" target="_blank">#cserrato21352#columbushs.com</a></em></p>
<br>
<p class="info2 display-4"><strong><em>I am a Senior High School Student looking to go into the Field of
Engineeing. My
goal is to dual major in Mechanical</em></strong></p>
<p class="info2 display-4" style="text-indent: 80px; margin-top: -10px;"><strong><em>and Engineering, and
hopefully one day work at
Boston Dynamics.</em></strong></p>
<!-- Socials -->
<div id="socials" class="d-flex flex-direction-row" style="margin-top: 7%;">
<!-- Github -->
<div class="socialHolder">
<a href="https://github.com/CadenCGS" target="_about">
<div class="socialLinks">
<img id="gitSocialImg" src="Images/gitSocial.jpg">
</div>
</a>
</div>
<!-- Instagram -->
<div class="socialHolder">
<a href="https://www.instagram.com/cadenserrato/" target="_about">
<div class="socialLinks">
<img id="igSocialImg" src="Images/igSocial.png">
</div>
</a>
</div>
<!-- Facebook -->
<div class="socialHolder">
<a href="https://www.facebook.com/ColumbusHS/" target="_about">
<div class="socialLinks">
<img id="fbSocialImg" src="Images/fbSocial.png">
</div>
</a>
</div>
<!-- LinkedIn -->
<div class="socialHolder">
<a href="https://www.linkedin.com" target="_about">
<div class="socialLinks">
<img id="liSocialImg" src="Images/liSocial.png">
</div>
</a>
</div>
</div>
</div>
<!-- Used To Scroll To Experience on Navbar -->
<p id="exp">.</p>
<hr class="pageBreak">
<!-- Experience Section -->
<div id="experience" class="container">
<h1 style="margin-top: 8%; text-indent: 35px; color: rgba(63, 158, 253, .9);"
class="subSectionName display-3">
Experience</h1>
<h1 style="text-indent: 60px; font-size: 3rem; margin-top: 2%;" class="subSectionName display-4">Robotics
</h1>
<br>
<p class="info2 display-4" style="text-indent: 120px;"><strong><em>I started my first year as a simple
builder
as
I
learned the basics of Vex. My second year I was a bit more</em></strong></p>
<p class="info2 display-4" style="text-indent: 60px; margin-top: -10px;"><strong><em> experienced and began
to
build
for advanced and
complicated
mechanisms. I built all year and ended up finishing </em></strong></p>
<p class="info2 display-4" style="text-indent: 80px; margin-top: -10px;"><strong><em>in 8th place at the
state
championship my team qualified for.</em></strong></p>
<div class="container">
<hr id="aboveDate">
<p class="info2 display-4" style="text-indent: 100px; margin-top: 2%;"><strong>Date: <span
style="color: rgba(63, 158, 253, 1);">August 2018 -
Present</span></strong></p>
</div>
</div>
</section>
<!-- Bootstrap Scripts -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous">
</script>
CSS
height: 4000px;
background-color: rgb(248, 248, 239);
}
html {
background-color: rgb(248, 248, 239);
scroll-behavior: smooth;
}
.navbar {
background-color: rgba(63, 158, 253, .9);
height: 100%;
position: fixed;
text-align: center;
flex-direction: column;
border-right: 9px solid rgb(168, 211, 255);
}
ul {
display: flex;
justify-content: center;
}
.nav-link {
transition: all .25s;
color: rgba(255, 255, 255, 0.726);
font-size: 1.5rem;
}
.nav-link:hover {
transition: all .25s;
color: white;
text-shadow: darkslategrey;
font-size: 1.7rem;
}
#pfp {
border: 9px solid rgba(255, 255, 255, .4);
border-radius: 50%;
height: 160px;
width: 160px;
position: static;
margin-bottom: 20px;
}
#primaryName {
font-family: 'Saira Extra Condensed';
color: rgb(146, 146, 146);
font-size: 6rem;
}
#secondaryName {
font-family: 'Saira Extra Condensed';
color: rgba(63, 158, 253, .9);
font-size: 6rem;
}
#main {
padding-top: 10%;
margin-left: 7%;
}
.info {
font-size: 1.7rem;
}
.info2 {
font-size: 1.3rem;
text-indent: 30px;
}
#top,
#exp {
color: rgba(63, 158, 253, 0);
}
.infoLink {
text-decoration: none;
font-family: 'Saira Extra Condensed';
color: rgb(110, 110, 110);
}
.infoLink:hover {
color: black;
}
#emailLink {
text-decoration: none;
color: black;
}
.socialHolder {
margin-left: 3%;
}
.socialLinks {
height: 65px;
width: 65px;
border-radius: 50%;
background-color: rgb(146, 146, 146);
display: flex;
justify-content: center;
transition: all .25s;
}
.socialLinks:hover {
transition: all .25s;
background-color: rgb(75, 75, 75);
}
#gitSocialImg {
border-radius: 50%;
height: 55%;
width: 55%;
margin-top: 25%;
}
#igSocialImg {
border-radius: 50%;
height: 80%;
width: 80%;
margin-top: 11%;
}
#fbSocialImg {
border-radius: 50%;
height: 55%;
width: 55%;
margin-top: 22%;
}
#liSocialImg {
border-radius: 50%;
height: 55%;
width: 55%;
margin-top: 22%;
}
.pageBreak {
border: 2px solid rgba(63, 158, 253, .9);
width: 85%;
margin-top: 4%;
margin-right: 13%;
}
.subSectionName {
font-family: 'Saira Extra Condensed';
color: rgb(146, 146, 146);
}
.subSectionInfo {
font-family: 'Saira Extra Condensed';
color: rgb(110, 110, 110);
font-size: 1.7rem;
margin-left: 60px;
}
#experience {
margin-left: 4.6%;
}
#aboveDate {
border: 2px solid rgba(63, 158, 253, .9);
width: 27.5%;
margin-left: 6%;
margin-bottom: -1%;
}```

Answer 1

You can write a media query and than do display: none; on the element you want to disappear.
Example:
#media (max-width: 800px) {
.navbar {
display: none;
}
}