mdBootstrap: navbar to keep corner link on top during expand or mobile mode

Question

I'm using Material Design Bootstrap on my responsive website.

On large screen in my navbar at the top I have:

1. My Brand link aligned left
2. Two page links
3. Profile dropdown aligned right

Large screen look:

Intention is that when I resize the screen to small device, I will have:

1. Toggler to expand the menu aligned left
2. My Brand link aligned in the middle
3. Profile dropdown aligned right

And when the toggler is clicked then the menu with two page links will expand, but the top navbar stays the same (toggler, My Brand, Profile).

Desired look on small screen after expansion:

What is happening is that when the toggler is clicked then My Brand link gets aligned right in the navbar and the Profile dropdown gets shown at the end of expanded menu.

Current behavior (wrong):

Here is live code in mdbootstrap.com snippet editor: https://mdbootstrap.com/snippets/jquery/temp/966115

<nav class="navbar navbar-expand-sm navbar-dark indigo">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-top">
  <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand font-weight-bolder" href="#">My Brand</a>
  <div class="collapse navbar-collapse" id="navbar-top">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
    </ul>
  </div>
  <div>
    <ul class="navbar-nav mr-1 mt-lg-1">
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle waves-effect waves-light" id="profile-dropdown"
          data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <i class="fas fa-user"></i>
        <span>Profile</span>
        </a>
        <div class="dropdown-menu dropdown-menu-right dropdown-info" aria-labelledby="profile-dropdown">
          <a class="dropdown-item waves-effect waves-light text-nowrap" href="/account">
          <i class="fas fa-user-cog navbar-profile-icon"></i>
          <span>My account</span>
          </a>
          <a class="dropdown-item waves-effect waves-light text-nowrap" href="/logout">
          <i class="fas fa-sign-out-alt navbar-profile-icon"></i>
          <span>Logout</span>
          </a>
        </div>
      </li>
    </ul>
  </div>
</nav>

Help is appreciated, thanks!

Answer 1

You'd have to user position:absolute to center the navbar-brand on the breakpoint of 576px; At this same breakpoint, you'd also have to float your dropdown to the right of the screen also

UPDATE: in light of questioner's comment, updated the code in snippet below... the mdbootstrap snippet in the question died !!

@media screen and (max-width:768px) {
  .fixedNavBarItem {
    position: absolute;
    top: 10px;
    right: 10px;
  }
  .navbar-brand {
    position: absolute;
    width: 67%;
    text-align: center;
    margin-left: 15%;
    top: 6px;
  }
}

<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.7/css/mdb.min.css" rel="stylesheet">

<!-- JQuery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.7/js/mdb.min.js"></script>

<!--Navbar -->
<nav class="mb-1 navbar navbar-expand-md navbar-dark default-color">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent-333" aria-controls="navbarSupportedContent-333" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent-333">
    <ul class="navbar-nav mr-auto">
      <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 dropdown">
        <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink-333" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown
          </a>
        <div class="dropdown-menu dropdown-default" aria-labelledby="navbarDropdownMenuLink-333">
          <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>
  <ul class="navbar-nav ml-auto nav-flex-icons fixedNavBarItem">
    <!--

  <li class="nav-item">
    <a class="nav-link waves-effect waves-light">
      <i class="fab fa-twitter"></i>
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link waves-effect waves-light">
      <i class="fab fa-google-plus-g"></i>
    </a>
  </li>
-->
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink-333" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <i class="fas fa-user"></i>
      </a>
      <div class="dropdown-menu dropdown-menu-right dropdown-default" aria-labelledby="navbarDropdownMenuLink-333">
        <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>
</nav>