阻止 Bootstrap 导航栏被 Django CMS 管理栏重叠

Question

当您登录以在站点上进行更改时，在 Django CMS 中 window 顶部显示的管理栏覆盖了 Bootstrap navbar。

这是它的样子：

如您所见，navbar 与工具栏重叠，而站点的其余部分在部署时向下移动以容纳工具栏。

这是 navbar 的 HTML:

<nav class="navbar navbar-fixed-top" role="navigation">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="index.html"><img src="img/EPG.jpg"></a>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li>
                    <a href="index.html">HOME</a>
                </li>
                <li>
                    <a href="about.html">ABOUT</a>
                </li>
                <li>
                    <a href="apply.html">APPLY</a>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">RESOURCES <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li>
                            <a href="calander.html">Calander</a>
                        </li>
                        <li>
                            <a href="people.html">People</a>
                        </li>
                        <li>
                            <a href="">ETC</a>
                        </li>
                        <li>
                            <a href="">ETC</a>
                        </li>
                        <li>
                            <a href="">ETC</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
</nav>

当出现 django CMS 工具栏时，如何使 navbar 像页面的其余部分一样调整？

Answer 1

因为他们都固定在顶端，所以他们总是会为那个位置而战。根据 docs，工具栏在打开时会附加一个 .cms-toolbar-expandedclass 到 html 标签。您可以添加一些 CSS 来在 CMS 工具栏打开时下推您的导航栏。类似于：

.cms-toolbar-expanded body, .cms-toolbar-expanded .navbar-fixed-top{
    top:30px;
}

编辑以添加 body 标签，因为根据您的布局，将导航栏向下推可能会破坏网站其余部分的对称性。它很小，但它会在视觉上打扰我。

阻止 Bootstrap 导航栏被 Django CMS 管理栏重叠

Stop Bootstrap Navbar from being overlapped by Django CMS admin bar

html

css

django

django-cms

twitter-bootstrap