在移动视图中更改导航栏的位置

Question

我想知道是否有一种方法可以仅通过使用CSS3来更改移动视图中导航栏的位置。 例如，我不想将导航栏放在移动视图中的顶部容器下方，而是希望将其固定在顶部容器上方。 我使用的是wordpress主题，谢谢。 该网站是www.capcar.com.au

Answer 1

您可以尝试使用媒体规则来“转换”属性。

Answer 2

添加CSS：

@media only screen and (max-width: 767px) { 

       .navigation_menu {
            background: none repeat scroll 0 0 #ffffff;
            position: absolute;
            top: 0;
            width: 100%;
        }
    .header_section {
        background-color: #ffffff;
        color: #99ca00;
        padding-top: 51px;
        width: 100%;
    }
}

Answer 3

Flexbox可以轻松解决此问题。 只需将display: flex和flex-direction到#wrapper 。 随后，媒体查询内，添加order: 0至.header_section和order: -1至.navigation_menu 。 这将切换这两个位置，但将其他所有内容保持原来的顺序。

您应该可以将其添加到CSS中：

#wrapper {
  display: flex;
  flex-direction: column;
}

@media only screen and (max-width:640px) {
  .header_section {
    order: 0;
  }
  .navigation_menu {
    order: -1;
  }
}

 var el = document.getElementById("toggle"); el.addEventListener("click", function(){ var menu = document.getElementById('menu'); menu.classList.toggle("show") }, false); 

 * { margin: 0; padding: 0; box-sizing: border-box; } #wrapper { display: flex; flex-direction: column; } header, nav ul { display: flex; max-width: 800px; width: 100%; margin: 0 auto; justify-content: space-between; align-items: flex-end; padding: 1rem 2rem; } header { margin-bottom: 1rem; } #logo { width: 40%; } .awards { display: flex; align-items: flex-end; width: 40% } #award1 { width: 25% } #award2 { width: 75%; } nav { background: linear-gradient(to bottom, #e3f5ab 0%, #99ca00 100%); display: flex; flex-direction: column; min-height: 3rem; } #toggle { display: none; align-self: flex-end; background: transparent; border: none; width: 2rem; height: 2rem; margin: .5rem 1rem; outline: none; cursor: pointer; } nav ul { list-style: none; padding: 0 2rem; } li { text-transform: uppercase; font-family: 'Open Sans', sans-serif; width: 20%; text-align: center; } li a { display: block; height: 3rem; line-height: 3rem; width: 100%; text-decoration: none; color: #02006d; } li:hover { background-color: #ffffff; } .caret { font-size: .6rem; } @media screen and (max-width:700px) { #logo { width: 70%; display: block; margin: 0 auto; } #award1 { display: none; } #award2 { display: none; } header { order: 0; display: block; } nav { order: -1; } #toggle { display: block; } #toggle img { width: 100%; } nav ul { display: none; } nav ul.show { display: flex; flex-direction: column; align-items: center; } nav ul li { width: 100vw; } } 

 <div id="wrapper"> <header> <img id="logo" src="http://www.capcar.com.au/wp/wp-content/uploads/2015/05/LOGO-FOR-WEB23.png" /> <div class="awards"> <img id="award1" src="http://www.capcar.com.au/wp/wp-content/uploads/2015/05/HIA_Logo1.png" alt="" /> <img id="award2" src="http://www.capcar.com.au/wp/wp-content/uploads/2015/05/MBA_Logo.png" alt="" /> </div> </header> <nav> <button id="toggle"><img src="http://www.tax-consulting-group-san-diego.com/images/taxes-menu-icon.png" alt="" /></button> <ul id="menu"> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Projects <span class="caret">&#9660;</span></a></li> <li><a href="#">Testimonials</a></li> <li><a href="#">Contact Us</a></li> </ul> </nav> </div> 

一个简单的干净演示 ，以及与您的站点一起进行的演示 （codepen不喜欢您的站点，因此标头看起来很奇怪，但是我无法让所有的CSS正确加载-因此，简单的演示）。

有关flexbox的更多信息，这是css-tricks和support表的摘录 。

希望这可以帮助！

Answer 4

尝试使用flex属性来构建菜单。 我通过此功能取得了巨大的成功，它允许通过CSS和媒体查询使用多种简单的订购方法。 尝试CSS-Tricks.com作为参考