试图解决我的移动设备的导航栏(Trying to fix my navigation bar for

我设计一个自适应网站而现在我有一个问题位。基本上，标志被设置在导航的中间，但是当我试图在移动或设置我的浏览器中查看它的移动它看起来像这样。

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

这就是它看起来像在全屏。

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

如何设置标志在导航的顶部在移动设备中查看时。

这是我为标记或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>

这是我对我的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}

在建设我的回应式网站我的使用框架结构。关于我的问题我该设置一些造型在媒体查询或者改变我的标记？

编辑

看看这个更新的答案会为你工作： http://jsfiddle.net/panchroma/HBhNt/

该HTML是完全一样的，你贴什么，与我添加了类标志来标识DIV的EXCETION。

CSS除了你贴的是：

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

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

低于原来的答案

一种选择是在你的资产净值容器的头部添加第二个标识，并有它仅适用于移动显示，而在同一时间隐藏在移动现有的标志。

见下文对你将如何做到这一点的HTML和CSS草案。

您可能需要使用的@media设置打得到你想要的结果，例如，你可能需要隐藏您的导航景观的智能手机或平板电脑，甚至中间的标志。

祝好运！

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