CODEWITHSUNDEEP
htmltwitter-bootstrapcssbootstrap-4
Joachim
Joachim

Reputation: 158

Bootstrap 4 fixed top navbar inside column

I'm trying to create a layout with a sidebar on the left side and on the right side a fixed top navigation bar and under that my site content. What I have: 

<div class="container-fluid">
        <div class="row no-gutter">

            <!-- left side -->
            <div class="col-md-4 sidebar" style="background-color: red;">
                <p>test</p>
            </div><!-- end left side -->

            <!-- right side -->
            <div class="col-md-8 offset-md-4">

                <!-- nav -->
                <div class="row no-gutter" style="background-color: blue">
                    <nav class="col-12 navbar fixed-top navbar-toggleable-md">
                        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
                            <span class="navbar-toggler-icon"></span>
                        </button>
                        <div class="collapse navbar-collapse" id="navbar">
                            <ul class="navbar-nav">
                                <li class="nav-item">
                                    <a class="nav-link" href="#">Home</a>
                                </li>
                            </ul>
                        </div>
                    </nav>
                </div><!-- end nav -->

                <!-- main content -->
                <div class="row no-gutter" style="background-color: green;">
                    <div class="col-12">
                       <p> main content </p>
                    </div>
                </div><!-- end main content -->

            </div><!-- end right side -->
        </div>
</div>

https://jsfiddle.net/0ka85tmn/1/

I can't seem to get the navigation bar correctly. It doesn't stay inside my column. I have played around with position attribute but can't get it working.

Anyone can help?

Upvotes: 0

Views: 2753

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362360

Using position:fixed takes the navbar out of the normal document flow and makes it relative to the entire page, so it's not longer contained by it's parent. For that reason you need to specifically set the position of the navbar...

.navbar {
    position: fixed;
    width: 100%;
    top: 0;
    left: 33.3333%;
    z-index: 1;
}

Also, there's no reason to contain it in a row and col-12.

Demo: http://www.codeply.com/go/5bPIH8Tbiw

Upvotes: 2

Related Questions