Trying to fix my navigation bar and logo for mobile devices

HTML & CSS
1

I’m designing a responsive website and right now i have bit of a problem. Basically logo is set in the middle of the navigation but when i tried viewing it in mobile or set my browser for mobile it looks like this.


This is what it looks like in full screen.

http://s255.photobucket.com/user/testament1234/media/desktop_zps4c60a09c.jpg.html

How do I set the logo on top of the navigation when viewed in a mobile device.

This is my code for the markup or HTML.

<div class="container">
 <div id="nav-container">
     <div class="six columns navigation">
     <ul>
         <li><a href="#" title="Home">Home</a></li>
         <li><a href="#" title="Home">Project</a></li>
         <li><a href="#" title="Home">Blog</a></li>

     </ul>
     </div>
     <div class="four columns">
         <h1>Logo</h1>
     </div>
     <div class="six columns navigation">
         <ul>
             <li><a href="#" title="Gallery">Gallery</a></li>
             <li><a href="#" title="Gallery">About</a></li>
             <li><a href="#" title="Gallery">Contact</a></li>
         </ul>
     </div>
 </div>
</div>

And this is my code for my CSS

#nav-container{margin-top:20px;}
.navigation{text-align:center; background-color:#D1673A;}
.navigation li{display:inline; }
.navigation a{text-decoration:none; color:black; display:inline-block; padding:20px 20px 20px}
.navigation a:hover{color:white; background-color:black}

My using skeleton framework in building my responsive website. Regarding my question do i set some styling in the media queries or change my markup?

2

Hi,

I don’t know anything about the skeleton framework but something like this should do what you want.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
#nav-container { margin-top:20px; }
.navigation {
	text-align:center;
	background-color:#D1673A;
}
.navigation ul {
	margin:0;
	padding:0;
	list-style:none
}
.navigation li { display:inline; }
.navigation a {
	text-decoration:none;
	color:black;
	display:inline-block;
	padding:20px 20px 20px
}
.navigation a:hover {
	color:white;
	background-color:black
}
 @media only screen and (max-width: 480px) {
.navigation {
	width:100%;
	float:none;
}
.navigation a { display:block }
#nav-container {
	position:relative;
	padding:70px 0 0;/* match the height of your logo*/
	margin:0;
}
.logo {
	position:absolute;
	top:0;
	left:0;
}
.logo h1{margin:0;}
}
</style>
</head>

<body>
<div class="container">
		<div id="nav-container">
				<div class="six columns navigation">
						<ul>
								<li><a href="#" title="Home">Home</a></li>
								<li><a href="#" title="Home">Project</a></li>
								<li><a href="#" title="Home">Blog</a></li>
						</ul>
				</div>
				<div class="four columns logo">
						<h1>Logo</h1>
				</div>
				<div class="six columns navigation">
						<ul>
								<li><a href="#" title="Gallery">Gallery</a></li>
								<li><a href="#" title="Gallery">About</a></li>
								<li><a href="#" title="Gallery">Contact</a></li>
						</ul>
				</div>
		</div>
</div>
</body>
</html>

At less than 480px width the media query sets the navigation to one column and absolutely places the logo at the top. The space is preserved via padding so you need to match that to your logo.

You will of course need to check this with your main css files in place (which should be above the code above in the html).