I am working on developing a website using mdbootstrap, and I had been using v4.4.5 until few days ago. After I changed to v4.5, I noticed that navbar-brand is not working properly as expected, but I am not sure what is the problem in my case. May I get any advice about this case (The description about the problem is below)?

Code:

<nav class="navbar navbar-expand-md navbar-dark bg-primary">

... Some code here ...

<div class='d-block d-md-none' id='left_btn_w'>
</div>

<div class="navbar-brand d-block d-md-none">
<a class='white-text' href='/'><strong>BaeDuck</strong></a>
</div>

<div class='d-block d-md-none'>
<ul class='navbar-nav'>
<li class='nav-item' id='right_btn_w'>
</li>
</ul>
</div>

<div class="navbar-collapse collapse" id="nav_left_xsm">
<ul class="navbar-nav">
<div class='nav_left_w' id='your_list_xsm'>
</div>
<div class='nav_left_w' id='management_xsm'>
</div>
</ul>
</div>

<div class="navbar-collapse collapse" id="nav_right_xsm">
<ul class="navbar-nav text-right">
<div class='nav_left_w' id='user_xsm'>
</div>
</ul>
</div>

</nav>
</div>

So, the problem is that the logo is in the middle of navbar, and when a user clicks left_btn_w or right_btn_w, nav_left_xsm or nav_right_xsm is dropped down under navbar. When I clicked it, it is dropped down very well, but the brand name in the navbar also goes down together, and the brand name will be located in the middle of navbar.

Related CSS:

.navbar-brand
 {
 position: absolute;
 width: 100%;
 left: 0;
 text-align: center;
 margin: 0 auto;
 z-index: 1;
 }
}

 #left_btn, #right_btn {
 position: relative;
 z-index: 2;
 }

 #your_list_xs, #management_xs {
 padding-top: 15px;
 }