定影導航欄元素包裝

我的導航條是這樣的：定影導航欄元素包裝

<div class="navbar-fixed" id="navigation"> 
    <ul id="alert_type_nav_drop_down" class="dropdown-content"> 
    </ul> 

    <nav> 
     <div class='nav-wrapper'> 
      <ul id='nav-mobile' class='left'> 
      <li><a href='/'><img src='http://vignette2.wikia.nocookie.net/gtawiki/images/9/9a/PlayStation_1_Logo.png/revision/latest?cb=20100130082645' height='25px'></a></li> 
       <li><a href='/'>Test</a></li> 
       <li><a href='/'>Another Test</a></li> 
       <li><a href='/'>Heyyy</a></li> 
       <li><a href='/'>Whyyy</a></li> 
       <li><a href='/'>Okkkkkk</a></li> 
       <li><a href='/'>Los Angeles</a></li> 
      </ul> 
      <a class="right black-text valign-wrapper"><img class="circle responsive-img" width=50px 
                      src="http://www.stockvault.net/blog/wp-content/uploads/2013/11/Portrait-8.jpg"></a> 
     </div> 
    </nav> 
</div>

小提琴：https://fiddle.jshell.net/g3mvhvdk/

的問題是，當窗口尺寸太小，元素環繞成的身體頁面像這樣：

當通常是這樣的：

什麼是解決此問題的好方法？我應該讓這些元素水平滾動嗎？

按在註釋中的建議，我已經添加了以下內容：

<div class="navbar-fixed hide-on-med-and-down" id="navigation">

這將隱藏我的導航欄時，它會調整要的東西足夠小，我的問題是，我該如何展現漢堡如果navbar的隱藏？是否有幫助者「在醫學上展示」課程？我想更大的問題是，是否有一種從顯示導航欄轉換到顯示漢堡和側欄的優雅方式？

來源

2017-02-23 Stupid.Fat.Cat

你會考慮躲在小屏幕尺寸的菜單項，而是呈現出「菜單」或「漢堡包圖標」，顯示的項目點擊時？ – sol

所以當它太小時將它轉換成sidenav？ –

這是一個選項。在較小尺寸的屏幕上，人們熟悉下拉菜單。或者，只需將導航高度設置爲百分比而不是使用像素，然後根據需要使用媒體查詢更改該值。 – sol

-1

.nav-wrapper { 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
#nav-mobile { 
 
    flex: 100; 
 
}

來源

2017-02-23 17:16:05

不幸的是，雖然這可以修復圖像環繞，元素會被移動，以致它們不可見 –

@ Stupid.Fat.Cat在展會上，您不需要在此主題中詢問關於設計的建議。應該開發設計。但是，如果您在完成設計的實施過程中遇到問題，這裏願意提供幫助。顯示您希望如何在小分辨率下工作的圖片。 –

定影導航欄元素包裝

回答

相關問題