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

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

simple clean demo和demo with your site（codepen不喜欢您的网站，因此标题看起来很奇怪，但我无法正常加载所有css，因此简单的演示）。

有关flexbox的更多信息，请访问snippet from css-tricks和support tables。

希望这有帮助！

Answer 4

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