Question

我正在使用Materialise CSS框架，当我使用固定导航栏时，我有一个问题导航栏重叠主要内容和页面标题（看看附加图像）

虽然在小屏幕尺寸上看起来不错：

    <header>
    <div class="nav-wrapper">
        <nav>
            <a href="#" data-activates="nav-mobile"
               class="button-collapse  hide-on-large-only"><i
                        class="material-icons">menu</i></a>
            <a class="page-title">Page Title</a>
            <ul id="nav-mobile" class="side-nav fixed">
                <li><a href="/admin/posts" class="waves-effect waves-teal">Posts</a></li>
                <li><a href="/admin/spam" class="waves-effect waves-teal">Spam</a></li>
                <li><a href="/admin/inbox" class="waves-effect waves-teal">Inbox</a></li>
            </ul>
        </nav>
    </div>
   </header>

谢谢！

Answer 1

文档在此处有一个答案：Fixed Navbar

<div class="navbar-fixed">
<nav>
  <div class="nav-wrapper">
    <a href="#!" class="brand-logo">Logo</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>
    </ul>
  </div>
</nav>
</div>

您必须使用<nav...包裹div.navbar-fixed。

Answer 2

尽管这个问题现在已经很老了，但是我也遇到了同样的问题，并且我意识到了答案。 Materialize文档说：“您可以调整此外部div的高度，以更改内容上的偏移量。”在解释如何使用固定导航栏时。

因此，将技巧手动设置为div.navbar-fixed的高度，并使其与导航栏的高度相同，这样它将抵消您的内容。

在我的情况下，导航栏下方有多个标签，而这些标签与内容重叠，因此我将div.navbar-fixed的高度设置为与导航栏高度和标签高度的总和相同。

<div class="navbar-fixed" style="height: 104px">
    <nav class="nav-extended">
        <div class="nav-wrapper">
            <a href="#" class="brand-logo left">MyApp</a>
            <a href="#" data-target="mobile-demo" class="sidenav-trigger right">
                <i class="material-icons">menu</i>
            </a>
        </div>
        <div class="nav-content">
            <ul class="tabs tabs-transparent">
                <li class="tab"><a class="active" href="#test1">Tab 1</a></li>
                <li class="tab"><a href="#test2">Tab 2</a></li>
                <li class="tab"><a href="#test3">Tab 3</a></li>
            </ul>
        </div>
    </nav>
</div>

请注意，我添加了内联样式，但是您可以在自己的css文件中引用该类，并为代码组织目的在其中设置高度。

固定导航重叠主要内容

2 个答案: