navbar is not appearing on mobile phones view - html

Question

my problem is when i press on the hamburger menu the whole menu does not appear (in mobile view) - even though i'm sure about the code and it working properly, the only problem in mobile view i can't diplay all the main menu ( work - blog - contact ) so when i hover on the icon i don't get anything.
nav-bar {
font-size: 18px;
padding-bottom: 10px;
}
.main-menu {
list-style-type: none;
}
.main-menu li {
text-align: center;
margin: 15px auto;
}
.main-menu a {
text-decoration: none;
color: black;
}
.main-menu a:hover {
text-decoration: overline;
}
.main-menu li i {
padding-right: 10px;
}
.logo {
margin-top: 10px;
margin-left: 20px;
width: 200px;
}
.logo img {
width: 40px;
border-radius: 20px;
margin-top: 20px;
margin-left: 30px;
margin-bottom: 30px;
}
.menu-toggle {
position: absolute;
top: 10px;
right: 20px;
cursor: pointer;
color: black;
font-size: 24px;
}
.active {
display: block;
}
.main-menu {
display: none;
}
#media screen and (min-width: 60rem) {
/*Desktop view*/
.nav-bar {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 0;
min-height: 70px;
}
.main-menu {
display: flex;
flex-wrap: wrap;
margin-right: 30px;
}
.main-menu li {
margin: 0px 0px 5px 0px;
}
.main-menu a {
margin-left: 40px;
}
/* Hide the menu toogle icon when the full menu is visible */
.menu-toggle {
display: none;
}
}
<nav class="nav-bar">
<!-- The Toggle Button is used to hide and show the menu for a Mobile Layout -->
<span class="menu-toggle">
<i class="fas fa-bars"></i>
</span>
<a href="#" class="logo">
<img src="img/logo.png" alt="Logo">
</a>
<ul class="main-menu">
<li>
<i class="fas fa-home"></i>Works
</li>
<li>
<i class="fas fa-university"></i>Blogs
</li>
<li>
<i class="fas fa-headset"></i>Contact
</li>
</ul>
</nav>

Answer 1

Your main-menu CSS is set to display none for mobile.
.main-menu {
display: none;
}
You need to tell it what to do like you did with desktop:
.main-menu {
display: flex;
flex-wrap: wrap;
margin-right: 30px;
}

Answer 2

The main issue was that the menu wasn't being hidden / shown. I corrected that and added a css transition. You can use js instead of the input to keep track of the menu state on mobile.
.nav-bar {
font-size: 18px;
padding-bottom: 10px;
overflow: hidden;
}
.main-menu {
list-style-type: none;
}
.main-menu li {
text-align: center;
margin: 15px auto;
}
.main-menu a {
text-decoration: none;
color: black;
}
.main-menu a:hover {
text-decoration: overline;
}
.main-menu li i {
padding-right: 10px;
}
.logo {
margin-top: 10px;
margin-left: 20px;
width: 200px;
}
.logo img {
width: 40px;
border-radius: 20px;
margin-top: 20px;
margin-left: 30px;
margin-bottom: 30px;
}
.menu-toggle {
position: absolute;
top: 10px;
right: 20px;
cursor: pointer;
color: black;
font-size: 24px;
width: 32px;
height: 32px;
}
#menu-toggle-checkbox {
display: none;
}
.active {
display: block;
}
.main-menu {
transform: translate(100%);
transition: transform 1s;
}
#media screen and (min-width: 60rem) {
/*Desktop view*/
.nav-bar {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 0;
min-height: 70px;
}
.main-menu {
display: flex;
flex-wrap: wrap;
margin-right: 30px;
transform: translate(0%);
}
.main-menu li {
margin: 0px 0px 5px 0px;
}
.main-menu a {
margin-left: 40px;
}
/* Hide the menu toogle icon when the full menu is visible */
.menu-toggle {
display: none;
}
}
#media screen and (max-width: 60rem) {
.menu-toggle {
display: block;
}
#menu-toggle-checkbox:checked + .logo + .main-menu {
transform: translateX(0)
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<nav class="nav-bar">
<!-- The Toggle Button is used to hide and show the menu for a Mobile Layout -->
<label class="menu-toggle" for="menu-toggle-checkbox">
<i class="fa fa-bars"></i>
</label>
<input type="checkbox" id="menu-toggle-checkbox"/>
<a href="#" class="logo">
<img src="img/logo.png" alt="Logo">
</a>
<ul class="main-menu">
<li>
<i class="fas fa-home"></i>Works
</li>
<li>
<i class="fas fa-university"></i>Blogs
</li>
<li>
<i class="fas fa-headset"></i>Contact
</li>
</ul>
</nav>