Navbar brand problem


Topic: Navbar brand problem

yoojs0525 pro asked 2 years ago

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;
 }


Ollie Vincent pro commented 2 years ago

Hi, They changed the syntax of components in version 4.5 to improve performance. Unfortunately that does mean some code from 4.4 may not work. Can you try taking a navbar from the site now and see if it works? Thanks

yoojs0525 pro commented 2 years ago

Hello. If I was taking out the navbar, it does not work.

Ollie Vincent pro answered 2 years ago

Hi,

I am still unsure what you are asking...

The code you have provided - I cannot see anything on the left or right.

The navbar brand is centered because of position: absolute; width: 100%; on the .navbar-brand class.

This would then prevent the mobile toggle from working. Please can you explain more?

Thanks


yoojs0525 pro commented 2 years ago

There will be something under ids (your_list_xsm, management_xsm and user_xsm), and it is clickable using z-index. However, I changed my mind to keep older version as I found a bug in Collapse on Chrome. Could you check if it is a bug? When I click a button on this page (<a href="https://mdbootstrap.com/javascript/collapse">https://mdbootstrap.com/javascript/collapse</a>), it can be opened, but not closed appropriately. It is fine on Safari.

Marta Szymanska staff pro premium answered 2 years ago

Hi, in our documentation of collapse, I don't see any bugs with that, the console also doesn't show any errors. What is exactly the problem? You upgraded your MDB package to 4.5.0 version and when you copy the code of the navbar from the documentation, you have the problem with navbar-brand, yes? I will help you if I'll have the details of the problem. Best, Marta
Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No