CODEWITHSUNDEEP
htmlcssdjangotwitter-bootstrapdjango-cms
Robert Hosking
Robert Hosking

Reputation: 134

Stop Bootstrap Navbar from being overlapped by Django CMS admin bar

The admin bar that appears in top of the window in Django CMS when you log in to make changes on the site overlays the Bootstrap navbar.

This is what it looks like:

django cms toolbar overlapping navbar

As you can see the navbar is being overlapped by the toolbar while the rest of the site moves down to accommodate for the toolbar when it deploys.

Here is the HTML for the navbar:

<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>

How can I make the navbar adjust like the rest of the page when the django CMS toolbar appears?

Upvotes: 2

Views: 2161

Answers (1)

onyeka
onyeka

Reputation: 1537

Since they're both fixed to the top, they're always going to be fighting for that position. According to the docs, the toolbar attaches a .cms-toolbar-expandedclass to the html tag when it's open. You could add a bit of CSS that pushes down your navbar when the CMS toolbar is opened. Something like:

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

Edited to add the body tag, because depending on your layout, pushing the navbar down could mess up the symmetry of the rest of your site. It's minor but it would bother me visually.

Upvotes: 6

Related Questions