Trying to fix my navigation bar for mobile devices

Question

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.

http://i255.photobucket.com/albums/hh140/testament1234/responsive_zps3a22ab61.jpg

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?

Answer 1

EDIT

See if this updated answer would work for you: http://jsfiddle.net/panchroma/HBhNt/

The HTML is exactly the same as what you posted, with the excetion that I added the class of logo to the logo div.

CSS in addition to what you posted is:

.navigation{
position:relative;
}

.logo{
height:60px;
}

@media only screen and (max-width: 767px) {
.logo{
 position:absolute;
    top:0;
    left:0;


}
.navigation{
   top:60px;
}  

.navigation ul li a{
    width:100%;
}
}

==============================

Original answer below

One option would be to add a second logo at the head of your nav container and have it display only for mobile, while at the same time hiding your existing logo on mobile.

See below for a draft of how you would do this in the HTML and CSS.

You will likely need to play with the the @media settings to get the results you want, for example you may need to hide the logo in the middle of your navigation for landscape smartphones or even tablets.

Good luck!

HTML

 <div class="container">
 <div id="nav-container">
 <div class="four columns display-mobile">
     <h1>Logo</h1>
 </div>
 <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 hide-mobile">
     <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>  

CSS

/* set defaults for display-mobile and hide-mobile */  

.display-mobile{
display:none;
}  

.hide-mobile{  
display:inherit;
}  

/* #Media Queries
================================================== */

/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */  
/* depending on the specifics of your site CSS, you may need to use !important with the following */  

@media only screen and (max-width: 479px) {
.display-mobile{
display: inherit; 
}
.hide-mobile{
display:none;
}
}