Jump to content

Drop-down list on navigation bar not aligning properly in mobile device


Jaytech

Recommended Posts

I have a responsive drop-down navigation bar that is responsive to screens of all width. The navigation bar has a hidden menu icon that displays  when the screen width is below 480 px. When the button is clicked the drop-down lists appear.  The problem is that am not able to make the navigation scale to the full-width of the mobile screen and also the drop-down lists appear as a block in tandem to the navigation bar.

index.html

<!DOCTYPE html>
<html>
<head>
<link href='style.css' rel='stylesheet' type='text/css'>
</head>
<body>

<!-- Clicking on the label will check the checkbox because for and id of checkbox are the same-->
<label for="show-menu" class="show-menu"> Menu </label> 
<input type="checkbox" id="show-menu">


<div class="navbar">
	<div class="menu">
		<ul class ="list">
			<li class="active">  Home </li>
			<li> <a href="humanities.html"> Humanities <span class="arrow">&#9660; </span> </a>
				<ul>
					<li> <a href="#" rel="nofollow"> Music </a></li>
					<li> <a href="#" rel="nofollow"> Linguistics </a></li>
					<li> <a href="#" rel="nofollow"> Penology  </a></li>
					<li> <a href="#" rel="nofollow"> Anthropology </a></li>
					<li> <a href="#" rel="nofollow"> Sociology <span class="arrow">  &rang;</span></a>
						<ul>
							<li><a href="#" rel="nofollow"> Psychology</a></li>
							<li><a href="#" rel="nofollow"> Counselling </a></li>
							<li><a href="#" rel="nofollow"> C.M.D </a></li>
						</ul> 
					</li>  
					
				</ul>
				
				
				
			</li>
			<li> <a href="education.html"> Education <span class="arrow">&#9660; </span> </a>
				<ul>
					<li> <a href="#" rel="nofollow"> E.C.D.E </a></li>
					<li> <a href="#" rel="nofollow"> Science </a></li>
					<li> <a href="#" rel="nofollow"> Arts with Edu </a>
						<ul>
							<li><a href="#" rel="nofollow"> Swahili </a></li>
							<li><a href="#" rel="nofollow"> Psychology </a></li>
							<li><a href="#" rel="nofollow"> Sociology of Ed. </a></li>
							<li><a href="#" rel="nofollow"> Liberal Ed. </a></li>
						</ul> 
					</li>  
					
				</ul>
			</li>
			<li> <a href="eng.html"> Engineering <span class="arrow">&#9660; </span> </a>
				<ul>
					<li> <a href="#" rel="nofollow"> Electrical </a></li>
					<li> <a href="#" rel="nofollow"> Civil & Structural </a></li>
					<li> <a href="#" rel="nofollow"> Aeronautical </a></li>
					<li> <a href="#" rel="nofollow"> Chemical </a></li>
					<li> <a href="#"rel="nofollow" > Mechanical </a>
						<ul>
							<li><a href="#" rel="nofollow"> Industrial </a></li>
							<li><a href="#" rel="nofollow"> Automotive </a></li>
						</ul> 
					</li>  
					
				</ul>
			</li>
			<li> <a href="contact.php" rel="nofollow"> Contact Us</a></li>
		</ul>
		
	</div>
</div>

</body>
</html>

style.css

/*Styles the background-color of an active link*/
.menu ul .active{
	color: #ffffff;
	background: #red; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(red 20%, green); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(red 20%, green); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(red 20%, green); /* For Firefox 3.6 to 15 */
    background: linear-gradient(red 20%, green); /* Standard syntax */
    background: linear-gradient(red 20%, green); /* Standard syntax */
}


.navbar{
	width:100%;
	max-width:1000px;
	text-align:center;
	margin-top:-8px;
	margin-bottom:60px;
	margin-left:160px;
}

.menu ul{
	/*Removes bullets*/
	list-style:none;
}

/*Styles each list within ul*/
.menu ul li{
	background-color:green;
	border:1px solid #ffffff;
	width:100%;
	max-width:173px;
	height:35px;
	line-height:35px;
	margin:auto;
	text-align:center;
	/*Makes the list dispaly in a horizontal maneer*/
	float:left;
	position: relative;
	border-radius:8px;
	font: 15px;
	font-weight:regular;
}

.menu ul li a{
	text-decoration:none;
	color:white;
	display:block;
}


.menu ul li a:hover{
	background-color:red;
	border-radius:8px;
}

.menu ul ul{
	position:absolute;
	margin-left:-40px;
	display:none;
}

.menu ul li:hover >ul{
	display:block;
}

.menu ul ul ul{
	width:100%;
	margin-left:134px;
	top:0px;
}

/*Display the drop-down on hover*/
/*+ selecctor styles every element that are placed immediately after another element */
.menu ul li a:hover + .menu ul li ul, .menu ul li ul:hover{
	display:block;
}

/*Hide Checkbox*/
input[type=checkbox]{
	display:none;
}

/*Show menu when invisible checkbox is checked*/
/*We select checkbox and then use selector column checked to make sure that the checkbox is checked*/
/*~ selects everything that is beneath element on the left shoul be styled with CSS style within the curly bracket*/
input[type=checkbox]:checked ~ .list{
	display:block;
}

/*Styles the menu-label according to its class*/
.show-menu{
	font-family:"Helvetica Neue", Helvetica, Arial,sans-serif;
	text-decoration:none;
	color:#fff;
	background: #19c589;
	text-align:center;
	padding:10px 0;
	display:none;
}


/*Responsive styles*/
@media screen and (max-width:480px){
	/*Make drop-down links appear inline*/
	.menu ul{
		position:static;
		display: none;
	}

	.navbar{
		margin-top:-15px;
		margin-left:5px;
	}

	 #show-menu:checked ~ .navbar .menu ul {
	 	display: block;
	 }
	
	/*Create vertical spacing*/
	.menu ul li{
		margin-bottom:1px;
	}
	
	/*Make all menu links full width*/
	.menu ul li, .menu li a{
		width:100%;
	}
	
	.show-menu{
		display:block;
	}
	body{
		background-image:none;
	}


}

 

Link to comment
Share on other sites

The mobile menu should appear at width 768px for tablet portrait view, every menu should be adjusted to responsively fill the whole width, that means losing margin-left: 160px; max-width: 173px; and removing default padding on ul which should have been reset to zero beforehand.

But your menu list items will be to wide before that also, so that need adjusting.

Edited by dsonesuk
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...