Collapse button on right side of navbar in bootstrap 4

Question

I am creating navbar using bootstrap 4 and made following changes

1. set the Collapse button on right side
2. Took the BrandName outside the collapse area so that its always there on Left side

Here is the detailed code

<nav class="navbar navbar-dark bg-danger">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler hidden-lg-up float-xs-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>
    <div class="collapse navbar-toggleable-md" id="navbarResponsive">           
        <ul class="nav navbar-nav float-md-right">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="http://example.com" id="responsiveNavbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
                <div class="dropdown-menu" aria-labelledby="responsiveNavbarDropdown">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <a class="dropdown-item" href="#">Something else here</a>
                </div>
            </li>
        </ul>          
    </div>
</nav>

I am facing problem while clicking on hamburger icon as its not displaying my Collapsing Menus Properly.

I don't know where I am making mistake.

Here is the Pen

Answer 1

You have to wrap the button and heading in a div and put class="clearfix-xs" in it.

Like this:

<div class="clearfix-xs">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler hidden-lg-up float-xs-right" type="button" data-toggle="collapse"
        data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false"
        aria-label="Toggle navigation">
    </button>
</div>

And css for this class is:

@media(max-width:768px) {
    .clearfix-xs:after {
        visibility: hidden;
        display: block;
        font-size: 0;
        content: " ";
        clear: both;
        height: 0;
    }
}

Here's a pen