Bootstrap collapse displaying beside not below

Question

I'm using bootstrap collapse to show/hide a list. However, the list is starting beside the collapse button and not below. See the image:

The HTML code is the following:

<nav class="mobile-menu">
    <div class="container-fluid">
        <div class="row">
            <div class="pull-left categories-header">
                <a data-toggle="collapse" href="#categories" aria-expanded="false">
                    <span class="material-icons">list</span>
                </a>
            </div>
            <div id="categories" class="collapse">
                <ul>
                    <li ng-repeat="category in ::vm.category">
                        <a href="#">{{category.name}}</a>
                    </li>
                </ul>
            </div>

            <div class="pull-right login">
                <a href="#">
                    <span class="material-icons">person_outline</span>
                </a>
            </div>
        </div>
    </div>
</nav>

And here is my CSS code:

.mobile-menu {
    .row {
        line-height: 50px;
        .categories-header {
            padding-left: 25px;
            span {
                vertical-align: middle;
                color: $color-white;
            }
            span:not(.material-icons) {
                text-transform: uppercase;
            }
        }
        .login {
            position: absolute;
            top: 0;
            right: 0;
            padding-right: 25px;
            span {
                vertical-align: middle;
                color: $color-white;
            }
        }
        #categories {
            ul {
                list-style-type: none;
                li {
                    a {
                        color: #FFF;
                    }
                }
            }
        }
    }
}

What should I do to get the expected behavior?

Answer 1

This is probably happening because some bootstrap declaration that you are not aware of. It looks like the button (.pull-left.categories) wrapper has float left property. Try declaring clear: both; on the dropdown div #categories.