Question

我正在尝试在我的全屏背景图像顶部创建一个导航菜单，问题是我在下面的方式，将导致100vh部分向下移动，因此图片的底部将不可见，我尝试在<div class="section valign-wrapper" id="home">中添加导航，但这会导致导航在页面上垂直对齐，因此它不再位于顶部，我的问题是：我怎样才能放置导航在页面顶部没有移动该部分？

＆＃13;

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">

<nav>
      <div class="nav-wrapper">
        <a href="#!" class="brand-logo">Logo</a>
        <a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
        <ul class="right hide-on-med-and-down">
          <li><a href="sass.html">Sass</a></li>
          <li><a href="badges.html">Components</a></li>
          <li><a href="collapsible.html">Javascript</a></li>
          <li><a href="mobile.html">Mobile</a></li>
        </ul>
      </div>
    </nav>

      <!--Landing page-->
      <div class="section valign-wrapper" id="home">
        <div class="container">
          <h1 class="big-title"> Mijn naam is <br> Dan <br> en ik bouw websites en <br> applicaties. </h1>
          </div>
        </div>

＆＃13;

Answer 1

通过在垂直对齐部分添加导航并添加：

来修复

nav {
  position: absolute;
  top: 0;
}

Answer 2

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">

<div class="navbar-fixed">
<nav>
      <div class="nav-wrapper">
        <a href="#!" class="brand-logo">Logo</a>
        <a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
        <ul class="right hide-on-med-and-down">
          <li><a href="sass.html">Sass</a></li>
          <li><a href="badges.html">Components</a></li>
          <li><a href="collapsible.html">Javascript</a></li>
          <li><a href="mobile.html">Mobile</a></li>
        </ul>
      </div>
    </nav>
</div>
      <!--Landing page-->
      <div class="section valign-wrapper" id="home">
        <div class="container">
          <h1 class="big-title"> Mijn naam is <br> Dan <br> en ik bouw websites en <br> applicaties. </h1>
          </div>
        </div>

使用materizlize.css，您可以尝试将nav包装在div中，并使用navbar-fixed类div作为< div class="navbar-fixed">

< div class="navbar-fixed" style="top:0px;position:fixed;">

让它永久保持顶级样式div

Error 404 localhost Apache/2.4.23 (Win32) OpenSSL/1.0.2h PHP/5.5.38

忽略div类对齐导航

2 个答案: