固定我的標誌和移動設備的導航

我一直在研究如何將我的標誌放置在移動設備頂部的方式，下面的標誌是導航。這是在桌面上查看時徽標和導航的外觀。標誌坐落在導航固定我的標誌和移動設備的導航

http://s255.photobucket.com/user/testament1234/media/desktopnav_zps46660bfe.jpg.html?sort=3&o=0

的中間，這是它看起來在移動設備觀看

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

我使用骨架網格框架設計這個像時網站。

這是我的HTML /標記

<!--HEADER --> 
<div id="nav-container" class="container"> 
<div class="six columns navigation navigation-left"> 
    <ul> 
     <li><a href="#" title="Home">Home</a></li> 
     <li><a href="#" title="Projects">Projects</a></li> 
     <li><a href="#" title="Blog">Blog</a></li> 
    </ul> 
</div> 
<div id="logo" class="four columns hide-mobile"> 
    <h1><a href="#" title="Aleem Guialap">Aleem Guialap</a></h1> 
</div> 
<div class="six columns navigation navigation-right"> 
    <ul> 
     <li><a href="#" title="About">About</a></li> 
     <li><a href="#" title="Gallery">Gallery</a></li> 
     <li><a href="#" title="Contact">Contact</a></li> 
    </ul> 
</div> 
</div>

這是我的CSS

/**************************/ 
/* NAVIGATION   */ 
/**************************/ 


.navigation-right{text-align:right} 
.navigation-right li{margin-right:40px} 
.navigation-left li{margin-left:40px} 
.navigation li{display:inline; line-height:130px} 
.navigation a{text-decoration:none; color:#4d4d4d; font-size:25px} 
.navigation a:hover{color:#7e2d2d} 

#logo h1 a{margin-top:20px; margin-bottom:20px; background:url(images/logo.png) no-repeat; display:inline-block; width:173px; height:105px; text-indent:-99999px}

我真的會感謝那些誰可以給我提供了我的問題的解決方案。我不確定是否需要更改我的標記，只是一些簡單的樣式。

來源

2013-07-09 clestcruz

檢查類似的問題@ http://stackoverflow.com/questions/17510102/trying-to-fix-my-navigation-bar-for-mobile-devices –

我能想到的3點不同的方法，您的問題：

首先是離開的標記，設置標誌，以絕對的位置，然後浮既導航到左，右。

另一種方法是將徽標div移到兩個導航div上，然後使用margin：0 auto將其居中，並且不要忘記設置div的寬度。然後將兩個導航div都浮動到左側和右側。

第三，我推薦的方法是將兩個導航組合到一個列表中，然後將前3個項目向左側漂浮，然後將其他3個漂浮到右側。

來源

2013-07-09 04:13:28

固定我的標誌和移動設備的導航

回答

相關問題