• Top Members
    Reps
    Posts
  • 834 Replies
    2585 Replies
  • 716 Replies
    2025 Replies
  • 331 Replies
    1928 Replies

CSS Help Please

User avatar
Mark
VIP - Donator
Posts: 370

CSS Help Please

Wed Jul 05, 2017 3:30 pm

Hello,

I have attached a screenshot of my website mobile version everything looks ok on the desktop version but when i change to mobile it all goes wrong with the information div is ment to be at the bottom of the menu but it dosent seem to move down and the menu just goes through it.

This is the code.

Code: Select all

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Cleaning Company Template</title>
	<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>

	<div id="wrapper">
		<div id="header"></div>
		
		<nav>
			<span class="nav-btn"></span>
			<ul class="nav">
				<li><a href="#">Home</a></li>
				<li><a href="#">About</a></li>
				<li><a href="#">Special Offers</a></li>
				<li><a href="#">Home Cleaning</a></li>
				<li><a href="#">Office Cleaning</a></li>
				<li><a href="#">Handyman Services</a></li>
				<li><a href="#">Testimonials</a></li>
				<li><a href="#">Payments</a></li>
				<li><a href="#">FAQ</a></li>
				<li><a href="#">Contact Us</a></li>
			</ul>
		</nav>



		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
		<script>
			$('span.nav-btn').click(function(){

				$('ul.nav').toggle();
			})

			$(window).resize(function (){

				if ( $(window).width() > 1024 ) {

					$('ul.nav').removeAttr('style');

				}

			})
		</script>

			<div id="information">
				
			</div>

		<div id="footer"></div>	

	</div>

</body>
</html>
CSS

* {
padding: 0;
margin: 0;
font-family: sans-serif, Arial;
}

html, body{
height: 100%;
background-color: #d4d4d4;
}

#wrapper{
min-height: 100%;
position: relative;
}

#header{
height: 150px;
background-color: black;
font-size: 25px;
color: #fff;
border-bottom: 1px solid #fff;
}

.nav {
height: 40px;
background-color: #79627e;
width: 100%;
color: #fff;
list-style: none;
text-align: center;
border-bottom: 1px solid #000;
}

.nav > li {
display: inline-block;
padding-top: 10px;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 10px;
}

.nav > li:hover {
background-color: #86718a;
}

.nav > li > a {
text-decoration: none;
color: #fff;
}

#information {
background-color: #000;
color: #fff;
width: 100%;
height: 40px;
padding-top: 10px;
padding-left: 15px;
}

#footer{
height: 100px;
background-color: black;
font-size: 25px;
line-height: 3.5;
position: absolute;
width: 100%;
bottom: 0;
left: 0;
color: #fff;
}

.clear{
clear: both;
}

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


.nav {
display: none;
}

.nav > li {
display: block;
background: #e4dfe5 ;
text-align: center;
border-bottom: 1px solid #000;
cursor: pointer;
}

.nav > li:hover{
background-color: #e4dfe5;
}

.nav > li > a{
display: block;
color: #000;
}

.nav-btn {
display: block;
background: #79627e;
padding-top: 10px;
color: #ffffff;
font-size: 25px;
text-align: center;
height: 40px;
cursor: pointer;
}

.nav-btn:before {
content: "Menu";
}

}
You do not have the required permissions to view the files attached to this post.

User avatar
CodenStuff
Site Admin
Posts: 4361

Re: CSS Help Please

Wed Jul 05, 2017 4:04 pm

Try changing your nav style to this:

Code: Select all

.nav {
display: none;
height: auto;
}
Should work.
Welcome to CodenStuff.com Learn Code, Love Code. Thank you for being a member of the community.

User avatar
mikethedj4
VIP - Site Partner
Posts: 2576

Re: CSS Help Please

Mon Sep 11, 2017 12:03 pm

Posted in the wrong section, this belongs in CSS Help and Support
Image
Image

Post Reply

Return to “Help & Support”