Topic: Custom class for MDBNavbarItem

pienaahj free asked 4 days ago


Expected behavior

Hi

I need to modify the text color of the nav-link in the nav-item. I have tried to use the linkClass="change-link-color" in:

<MDBNavbarNav class="mb-1 mb-lg-0">
    <MDBNavbarItem  linkClass="change-link-color" to="/" active exact>
    Home
    </MDBNavbarItem>   
    <MDBNavbarItem href="/CoursePage" exact linkClass="change-link-color">
    Education
    </MDBNavbarItem>
</MDBNavbarNav>



 <style lang="scss" scoped>

@import '@/assets/config/_variables.scss'; .change-link-color { color: red !important; }

as per the API information and answered question by Magdalena Dembna, "Try adding property anchorClass to mdb-nav-item Home As for navbar-nav and positioning you can use the following props (Boolean): justifyAround, vertical, center, right. Kind regards, Magdalena"

I cannot get this working and any help will be highly appreciated.

Thanks Hendrik

Actual behavior

No color change in Navbar.

Resources (screenshots, code snippets etc.)

Navbar screenshot

http://localhost:8080/CoursePage


pienaahj free answered 2 days ago


Hi Bartosz

Many thanks for the response. I'm afraid get a 404 on the snippet. I have prepared a few screen shots for you. The code and the resulting DOM.

It seems that although the class has pulled through to the browser it has no translation to the DOM.

I may be missing something silly here.

Help much appreciated.Hendrik

Class enter image description here

Resultenter image description here

Codeenter image description here

Resultenter image description here


Bartosz Cylwik staff commented 1 day ago

Please check if you can pass any other styles inside the file you have your change-link-color styles. Maybe there is some issue with that. If that's not a problem, you can also add your styles inside vue file

<style>
.change-link-color {
  color: red !important
}
</style>

The snippet should be working now.


pienaahj free commented 1 day ago

Hi Bartosz

I really appreciate the effort and feedback. After spending hours on this, I finally found the fault. My style tag is " - this does NOT work. Pure does! The change-link-color class does not get applied with scoped style. Should this be like this by intention?

Many thanks


Bartosz Cylwik staff answered 2 days ago


Hi! You can use linkClass to change the color of a link. I prepared a snippet for you to show how it works. Please check if your change-link-color class is beeing added to the nav link (view the source code in your browser) and if it's not, check if you added your css properly. Best regards!



Please insert min. 20 characters.

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: MDB5 3.0.0
  • Device: iMac
  • Browser: Chrome
  • OS: macOS 10.15.7
  • Provided sample code: No
  • Provided link: Yes