How to structure HTML navbar for both mobile and desktop screens - html

Question

I have made two HTML navbars (one for desktop screens and another for mobile screens) and I want to have only one HTML navbar and use CSS to style for both screen sizes since I believe it's not a good idea to repeat your code.
The thing is I have never done this thing before and most sample examples I found are using CSS frameworks. How should I approach this issue?
Here's a simplified version of the code:
function openNav() {
document.getElementById("sidenav").style.width = "250px";
}
function closeNav() {
document.getElementById("sidenav").style.width = "0";
}
.navbar {
background-color: white;
padding-bottom: 10px;
width: 100%;
}
.main-nav {
display: none;
}
.navbar-toggle {
position: absolute;
top: 8px;
right: 20px;
font-size: 19px;
}
.nav-mobile {
height: 100%;
width: 0;
position: fixed;
z-index: 2;
top: 0;
right: 0;
background-color: white;
overflow-x: hidden;
padding-top: 80px;
}
.nav-mobile a {
display: block;
}
.nav-mobile .closebutton {
position: absolute;
top: 0;
right: 5px;
font-size: 56px;
}
.bar1,
.bar2,
.bar3 {
width: 25px;
height: 2px;
background-color: black;
margin: 6px 0;
}
#media (min-width: 768px) {
.main-nav {
display: flex;
margin-right: 30px;
flex-direction: row;
justify-content: flex-end;
}
.navbar-toggle {
display: none;
}
.navbar {
display: flex;
justify-content: space-between;
}
}
<nav class="navbar">
<div class="logo-position">
LOGO
</div>
<ul class="main-nav">
<li>Home</li>
<li>About</li>
<li>
Portfolio
</li>
<li>Contact</li>
</ul>
</nav>
<!-- Navbar for mobile -->
<div id="sidenav" class="nav-mobile">
<a href="javascript:void(0)" class="closebutton" onclick="closeNav()"
>×</a
>
Home
About
Portfolio
Contact
</div>
<div class="navbar-toggle" onclick="openNav()">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>

Answer 1

You should use media queries to make anything responsive. You are right about repetitive code, it's not good in any way. You can use #media screen and (max-width: 600px) {} to target mobile devices and show/hide elements in desktop/mobile.
<nav class="navbar">
<div class="logo-position">
LOGO
</div>
<div class="navbar-toggle" onclick="openNav()"> <!--HIDE IN DESKTOP-->
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<ul class="main-nav"> <!--HIDE IN MOBILE-->
<li>Home</li>
<li>About</li>
<li>
Portfolio
</li>
<li>Contact</li>
</ul>
</nav>
Following a tutorial is a good start. https://www.w3schools.com/howto/howto_js_topnav_responsive.asp