在隱藏的漢堡菜單中轉換導航欄

Question

所以我創建了一個導航欄，現在，對於移動設備，我只想顯示徽標和一個漢堡菜單（打開時）顯示<li>和社交媒體圖標（那些在 html 上，但我'不能給它們任何寬度）。 我不想要背面的舊導航欄菜單，我嘗試給它一個 display: none on the media queries 或 background-color: transparent 但沒有任何工作。

基本上我希望漢堡菜單顯示 li's 和帶有社交媒體圖標的框，所有這些都是垂直顯示的。

鑒於以下代碼，獲得此結果的最佳方法是什么？

 .showcase .nav-bar { width: 100%; height: 8rem; background-color: var(--branding); display: flex; justify-content: space-between; align-items: flex-end; position: fixed; z-index: 90; box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .4); top: 0; } .nav-logo { /*CHECK WHEN UPLOADING LOGO*/ width: 14rem; margin: auto .5rem; } .showcase .nav-bar .nav-links { display: flex; justify-content: space-around; width: 40%; } .showcase .nav-bar .nav-links li { margin-bottom: .5em; text-transform: uppercase; font-size: 1.3rem; letter-spacing: .2em; list-style: none; transition: all .2s; } .showcase .nav-bar .nav-links a { color: var(--lightgrey); text-decoration: none; } .nav-links li:hover, .nav-links li:focus { transform: scale(1.2); } .showcase .nav-bar .nav-social { margin: 0 2rem .5rem 2rem; } .showcase .nav-bar .nav-social a { margin: 0 .5rem; text-decoration: none; color: var(--lightgrey); font-size: 1.8rem; } .hamburger { margin: 1em; display: none; } .hamburger div { width: 25px; height: 2px; background-color: #d1d1d1; margin: .4em; } @media only screen and (max-width: 768px) { .showcase { height: 100vh; } .nav-bar { } .nav-links { position: absolute; right: 0px; width: 40%; height: 80vh; top: 8rem; background-color: var(--branding); display: flex; flex-direction: column; align-items: center; } .hamburger { display: block; } }

 <nav class="nav-bar"> <div> <a href="#"><img src="../src/images/logo.svg" alt="LBH Logo" class="nav-logo"></a> </div> <ul class="nav-links"> <li><a href="#abt">About</a></li> <li><a href="#srv">Services</a></li> <li><a href="#soc">Social</a></li> <li><a href="#inf">Contact</a></li> </ul> <div class="nav-social"> <i class="fab fa-instagram "></i> <i class="fab fa-facebook-f"></i> <i class="fab fa-twitter"></i> </div> <div class="hamburger"> <div class="line1"></div> <div class="line2"></div> <div class="line3"></div> </div> </nav>

Answer 1

在你有display:flex ，你還需要放置flex-direction: column以便垂直顯示內容。

也就是說，您甚至可能不需要display:flex因為您使用的元素的默認display是block ，這使得它們的內容無論如何都垂直堆疊。