固定导航重叠主要内容答案

【问题标题】：Fixed nav overlaps main content固定导航重叠主要内容
【发布时间】：2016-08-06 06:40:47
【问题描述】：

我正在使用 Materialize 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>

谢谢！

【问题讨论】：

标签： fixed nav materialize

【解决方案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>

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

【讨论】：

还是一样的问题，你可以在浏览器里试试
@AliSherafat 你是对的。但这在他们的网站上效果很好！因此，我使用他们使用的 CSS 对其进行了测试：materializecss.com/css/ghpages-materialize.css 令我惊讶的是，这解决了问题。显然，他们发布的版本与他们在网站上使用的版本不同。

【解决方案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 文件中引用该类并在此处设置高度以进行代码组织。

【讨论】：