Jump to content
Jaytech

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

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;
	}


}

 

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...