【问题标题】: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 包裹&lt;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 文件中引用该类并在此处设置高度以进行代码组织。

    【讨论】:

      猜你喜欢
      • 2016-03-02
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2016-03-13
      • 2015-08-01
      • 1970-01-01
      • 2020-10-11
      • 2013-12-22
      相关资源
      最近更新 更多