Can anyone help fix my attempt at a responsive navigation?

[ad_1]

I am trying to make my navigation menu responsive. I have made it so the navigation list items are hidden on mobile display and the menu <p> tag appears ready to be clicked to show the menu but can’t seem to get my list items to show on click when on mobile display. Any help please, thank you.

I can link a codepen if that would be more helpful to see the code!

&#x200B;

This is my HTML

<header>
<div class=”nav-container”>
<p id=”menu” onclick=”toggleMenu()”> Menu</p>
<nav class=”nav” id=”nav-menu” role=”navigation”>
<ul>
<li class=”nav-item”><a href=”/”>Home</a>
</li>
<li class=”nav-item”><a href=”/”>About Us</a>
</li>
<li class=”nav-item”><a href=”/”>Services</a>
<ul class=”sub-menu”>
<li class=”nav-item”><a href=”/”>Windows</a>
</li>
<li class=”nav-item”><a href=”/”>Glass</a>
</li>
<li class=”nav-item”><a href=”/”>Doors</a>
</li>
<li class=”nav-item”><a href=”/”>Roofline</a>
</li>
</ul>
</li>
<li class=”nav-item”><a href=”/”>Our Work</a>
</li>
<li class=”nav-item”><a href=”/”>Contact Us</a>
</li>
</ul>
</nav>
</div>
</header>

This is my CSS (I am using SCSS so this is the complied version)

header {
height: 128px;
border-bottom: 1px solid #f0f0f0;
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 4000;
background: white;
}

header .nav-container {
max-width: 100em;
margin: auto;
display: flex;
justify-content: space-between;
z-index: 45;
padding: 0 1.5rem;
}

header .nav-container .logo {
width: 14%;
padding-top: 2.8rem;
}

header .nav-container p {
display: none;
}

@media only screen and (max-width: 600px) {
header .nav-container p {
display: block;
}
}

header .nav-container nav {
padding-top: 2rem;
}

header .nav-container nav ul {
display: block;
}

@media only screen and (max-width: 600px) {
header .nav-container nav ul {
display: none;
}
}

header .nav-container nav ul li {
position: relative;
display: inline-block;
}

header .nav-container nav ul li a {
display: inline-block;
transition: all 0.5s linear;
text-decoration: none;
padding: 16px 10px;
color: #00458b;
}

header .nav-container nav ul li a:hover {
color: #00458b;
}

header .nav-container nav ul li ul {
display: none;
background: white;
position: absolute;
top: 100%;
width: 160px;
padding: 0;
z-index: 500;
}

header .nav-container nav ul li ul li,
header .nav-container nav ul li ul a {
width: 100%;
}

header .nav-container nav ul li:hover ul {
display: block;
}

header .nav-container nav ul .menu-item-40 a {
padding: 0;
}

This is my javascript

function toggleMenu() {
var menuBox = document.getElementById(‘nav-menu’);
if(menuBox.style.display == “block”) {
menuBox.style.display = “none”;
}
else {
menuBox.style.display = “block”;
}
}

[ad_2]