Crankeedoodledoo Crankeedoodledoo - 15 days ago 7
CSS Question

Problems with a responsive navigation bar

I've been trying to build a responsive navigation bar. I'm using a

<nav>
element that contains an
<img>
and a
<ul>
element. I have set up media queries so that when the screen is resized, some of the
<li>
elements are hidden with the
display: none
property. The problem occurs when I click on the menu icon. It's supposed to display the hidden menu items but it doesn't.
Could someone please have a look at the fiddle and tell me what I'm doing wrong?
Thanks in advance.

UPDATE:

Sorry, I'm still learning the ropes. Could you please give me instructions if I do something incorrectly instead of downvoting me immediately? Thanks.

Here is my code:



function myFunction() {
var x = document.getElementById("myNav");
if (x.className === "nav") {
x.className += " responsive";
} else {
x.className = "nav";
}
}


body {
background-image: url("home/pexels-photo-4.jpg");
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}

.header {
background-color: rgba(0,0,0,0.6);
}

.logo {
width: 150px;
height: 110px;
margin-left: 50px;
}

.nav {
float: right;
padding-top: 50px;
margin-right: 50px;
}

.nav li {
float: left;
padding: 0 10px;
}

.nav li a {
color: #fff;
text-decoration: none;
font-family: "Raleway";
font-size: 16px;
font-weight: 600;
}

ul.nav li a:hover,
ul.nav li a:focus {
background-color: transparent;
color:#fff;
}

ul.nav a:hover:before,
ul.nav li a:focus:before {
width:100%;
background:#fff;
}

ul.nav a:before {
content:'';
height:2px;
width:0;
position:absolute;
top:auto;
right:auto;
bottom:0;
left:50%;
-webkit-transform:translate3d(-50%,0,0);
transform:translate3d(-50%,0,0);
-webkit-transition:.4s;
transition: .4s;
}

.nav li.icon {
display: none;
}

@media screen and (max-width:765px) {

.nav li:not(:first-child) {
display: none;
}
.nav li.icon {
float: right;
display: inline-block;
}
}

@media screen and (max-width:765px) {
ul.nav .responsive {
position: relative;
}
ul.nav .responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.nav .responsive li {
float: none;
display: inline;
}
ul.nav .responsive li a {
display: block;
text-align: left;
}
}

@media screen and (max-width: 500px) {
.nav {
padding-top: 20px;
}
.nav li a {
font-size: 14px;
}

.logo {
margin: 0;
width: 110px;
height: 70px;
}
}

<nav class="header">
<img class="logo" src="images/logos/marcon logo white on trans copy 2.png">
<ul class="nav" id="myNav">
<li><a href="#"><span class="glyphicon glyphicon-home" aria-label="Home"></span></a></li>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
<li class="icon">
<a href="#" onclick="myFunction()">&#9776;</a>
</li>
</ul>
</nav>




Answer

The problem is in CSS. You wrote

ul.nav .responsive li

but since your function gives the "responsive" class to the ul element with the "nav" class you need to get rid of the space to declare that it is the ul element with both the "nav" and "responsive" classes:

ul.nav.responsive li
Comments