I can not put a container around a bootstrap 4 navbar

Question

I am trying to put a container class around my navbar, however, the toggle moves to the centre in mobile view.

<nav class="navbar navbar-toggleable-md navbar-light bg-faded" id="commRollover">
     <div class="container">
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <a class="navbar-brand" href="#"><img src="img/qube_navbar_brand.webp" width="126px" height="54px"></a>
      <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
        <ul class="navbar-nav">
          <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="#">Features</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Pricing</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
        </ul>
      </div>
    </div>

    </nav>

To stop this I included this jquery code:

if ($(window).width() < 960) {
    $("#commRollover .container").removeClass("container");
}

However, the navbar link goes underneath the navbar brand and I don't know why.

Here is the Codepen

Answer 1

If you're trying to have the gray background full screen and navbar within the container, you'd need to do something like this...

<div class="bg-faded">
    <div class="container">
        <nav class="navbar navbar-toggleable-md navbar-light" id="commRollover">
            <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <a class="navbar-brand" href="#"><img src="img/qube_navbar_brand.webp" width="126px" height="54px"></a>
            <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
                <ul class="navbar-nav">
                    <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="#">Features</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Pricing</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link disabled" href="#">Disabled</a>
                    </li>
                </ul>
            </div>
        </nav>
    </div>
</div>

http://www.codeply.com/go/bCO20TFmYw