No replies
quartzy1
quartzy1's picture
Offline
newbie
London
Last seen: 2 weeks 5 days ago
London
Joined: 2017-08-17
Posts: 1
Points: 2

My menu is going all wrong after I added the media queries. Only the home tab is showing and all the bullets are showing for the links. Here is my menu html

<div class="nav">
			<label for="toggle">&#9776;</label><input type="checkbox" id="toggle">
			<div class="menu"><ul>
				<li><a href="http://index.html">Home</a></li>
				<li><a href="http://contact.html">Contacts</a></li>
				<li class="active"><a href="http://news.html">News</a></li>
				<li><a href="http://members.html">Members</a></li>
				<li><a href="http://policies.html">Policies</a></li>
				<li><a href="http://volunteer.html">Volunteer</a></li>
				<li><a href="http://links.html">Links</a></li>
			</ul>
		</div></div>

and this is the code for the CSS

.nav {
	text-decoration: none;
	background-color: #3333FF;
	border-bottom: 1px solid #EAEAEB;
	height: 40px;
	line-height: 40px;
}
.menu {
	margin: 0 20px 0 0;
}
.menu a {
	float: left;
	clear: right;
	text-decoration: none;
	color: white;
	margin: 0 10px;
	line-height: 44px;
}
label {
	margin: 0 20px 0 0;
	font-size: 20px;
	line-height: 44px;
	display: none;
	width: 20px;
	float: right;
}
#toggle {
	display: none;
}
.menu li:visited {
	background-color: #0000EE;
	color: #fff;
}
.menu:active {
	background-color: #0000EE;
	color: #fff;
}
.menu li:hover {
	background-color: #0000EE;
	color: #fff;
}
/* Show Hamburger */
@media screen and (max-width: 500px){
label {
	cursor: pointer;
	margin: 0 20px 0 0;
	font-size: 24px;
	font-weight: bold;
	line-height: 40px;
	display: block;
	width: 20px;
}
.menu {
	background-color: #3333FF;
	text-align: center;
	width: 100%;
	display: none;
	text-decoration: none;
}
.menu a {
	display: block;
	border-bottom: 1px solid white;
	margin: 0;
}
#toggle:checked + .menu {
	display: block;
}
}

Also I got a picture of the issues hope you can see it.Can anyone help?

AttachmentSize
menu.jpg79.43 KB