Bootstrap 4: Align logo/brand to the right : Total noob here...
I'm trying to align the brand/logo on the right side of my navbar but when I manage to do that, the logo stays inside the collapse menu when I get to mobile view.

This is the correct position in desktop view:
[![Logo right aligned in desktop view][1]][1]

This is what happens when I go into mobile view. I want the logo to stay on the top while the menu opens down:

[![Logo inside the collapse menu][2]][2]

Here's my code:

      <nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-sika">
    <div class="container">
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarsExampleDefault">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Início <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Zonas da Casa</a>
            <div class="dropdown-menu" aria-labelledby="dropdown01">
              <a class="dropdown-item" href="#">Garagens e Estacionamentos</a>
              <a class="dropdown-item" href="#">Cozinhas e WC's</a>
              <a class="dropdown-item" href="#">Quartos e Salas</a>
              <a class="dropdown-item" href="#">Varandas e Terraços</a>
              <a class="dropdown-item" href="#">Piscinas e Reservatórios de Água</a>
              <a class="dropdown-item" href="#">Fachadas</a>
              <a class="dropdown-item" href="#">Coberturas Inclinadas</a>
              <a class="dropdown-item" href="#">Coberturas Planas</a>
              <a class="dropdown-item" href="#">Caves e Paredes Enterradas</a>
              <a class="dropdown-item" href="#">Isolamento Térmico pelo Exterior</a>
            </div>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">100 Soluções</a>
          </li>
          <li class="nav-item">
            <a class="nav-link page-scroll" href="#pos">Pontos de Venda</a>
          </li>
          <li class="nav-item">
            <a class="nav-link page-scroll" href="#registo">Registo</a>
          </li>
          <li class="nav-item">
            <a class="nav-link page-scroll" href="#contacto">Contacto</a>
          </li>
        </ul>
      </div>
      <a class="navbar-brand" href="#">
        <img src="img/logo_sika_pt_02.png" width="225" height="45" class="d-inline-block align-top" alt="">
      </a>
    </div>
  </nav>

This code was copied from a template and I'm trying to edit it.


  [1]: https://i.stack.imgur.com/ZNxm9.png
  [2]: https://i.stack.imgur.com/aChtk.png