NavbarBrand link is not working

Topic: NavbarBrand link is not working

nichiki asked 5 years ago

mdb-navbar-brand link(href attribute) seems not working.Is this a bug?

Expected behavior

<nav class="navbar navbar-dark indigo navbar-expand-lg">
  <button type="button" data-toggle="collapse" data-target="navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler">
    <span class="navbar-toggler-icon"><!----></span>
  </button>
  <a class="navbar-brand" href="https://mdbootstrap.com/">
    Link
  </a>
</nav>

Actual behavior (Link is not working)

<nav class="navbar navbar-dark indigo navbar-expand-lg">
  <button type="button" data-toggle="collapse" data-target="navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler">
    <span class="navbar-toggler-icon"><!----></span>
  </button>
  <div class="" href="https://mdbootstrap.com/"> 
    <div class="navbar-brand">
      Link
    </div>
  </div>
</nav>

My Template

<template>
  <mdb-navbar color="indigo" dark>
    <mdb-navbar-brand href="https://mdbootstrap.com/">
      Link
    </mdb-navbar-brand>
  </mdb-navbar>
</template>

https://mdbootstrap.com/docs/vue/navigation/navbar/#supported-content

Add comment

Mikołaj Smoleński staff answered 5 years ago

0 0 Best answer

Please pass also tag property to the component:

<template>
  <mdb-navbar color="indigo" dark>
    <mdb-navbar-brand tag="a" href="https://mdbootstrap.com/">
      Link
    </mdb-navbar-brand>
  </mdb-navbar>
</template

Let me know if it helped.

Best regards

Add comment

nichiki answered 5 years ago

0 0 Best answer

Hello Mikołaj,

Thanks for your reply. Actually, I have already tried your solution, but it doesn't work.The result follow as:

<div class="" href="https://mdbootstrap.com/">
  <a class="navbar-brand">
    Link
  </a>
</div>

href property is applied to div instead of a.

Best regards

Add comment

Mikołaj Smoleński staff answered 5 years ago

0 0 Best answer

You're right. We need to fix that bug. Thanks for reporting about the issue.

Best regards

Add comment

nichiki answered 5 years ago

0 0 Best answer

Thank you for confirming. I would be grateful if you could fix it.

Best regards

Add comment

Çağdaş İlhan answered 5 years ago

0 0 Best answer

I have the same problem the navbar wont work.

Add comment

Mikołaj Smoleński staff answered 5 years ago

0 0 Best answer

Is it the same problem with your link? If yes please temporarily use the basic code:

<a class="navbar-brand" href="https://mdbootstrap.com/">
    Link
</a>

Best regards

Add comment

lyahim answered 4 years ago

0 0 Best answer

Hello Mikolaj,

The actual release works correctly, but I find an ugly href tag in wrapper div.

<div data-v-39e892d4="" data-v-d6b74ff0="" class="" href="/" data-v-2b9910e1="">
    <a data-v-39e892d4="" href="/" class="navbar-brand">
         <img data-v-d6b74ff0="" data-v-39e892d4="" src="https://mdbcdn.b-cdn.net/img/logo.cdd026c3.svg" height="30" alt="">
    </a>
</div>

Best Regards,Mihaly

Mikołaj Smoleński staff commented 4 years ago

Thanks for Your remarks. We'll fix it soon. Best regards

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

User: Free
Premium support: No
Technology: MDB Vue
MDB Version: 5.6.0
Device: PC
Browser: Chrome
OS: Mac OS 10.12.6
Provided sample code: No
Provided link: Yes

nichiki

30Support score
2Questions 2Answers

0Snippets likes 0Snippets