I am a beginner in html and css and my instructor wants us to create a resume using bootstrap. Bootstrap is designed to provide interactive design that adjusts seamlessly across different devices. I am currently working on aligning elements and I would like my navbar to disappear when the page is resized. How can I achieve this?
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">
... (omitted for brevity)
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;
}
... (omitted for brevity)