Topic: How to apply custom styling to a navbar

ericdevjs free asked 4 years ago


Hi,

I'm new to MDBVue and I was wondering how to apply custom CSS to navbar to change nav-items font size and position, I tried adding a custom class to navbar-nav and nav-items but it did not work.

Any help would be really appreciated

Thank you


Magdalena Dembna staff answered 4 years ago


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


ericdevjs free commented 4 years ago

Hi,

Thank you for your answer but since I'm new to this, is it possible to explain a little how to use anchorClass, do I have to create those classes or they already exist, and if they already exist, where can I find those classes.

Thank you


Magdalena Dembna staff commented 4 years ago

The anchorClass is a property so you have to use it like this: <mdb-nav-item anchorClass="your-custom-classs">Link</mdb-nav-item> . You can find predefined classes all across our documentation, f.e. colors: https://mdbootstrap.com/docs/vue/css/colors/ . As for navbar's alignment you can find examples here: https://mdbootstrap.com/docs/vue/navigation/navbar/#alignment


ericdevjs free commented 4 years ago

Hi,

By saying anchorClass="your-custom-class" do you mean classes that I define in the style tag of my components ?

I have a suggestion for predefined classes, it would be a lot easier and less time consuming if you could put together a list of all predefined classes available in mdbvue than searching throughout the docs, and I'm sure It would benefit all the devs using mdbvue.

Thank you


Magdalena Dembna staff commented 4 years ago

It doesn't matter if the class predefined in the mdbvue or your own in the style tags - it will work in both ways. Thank you for this suggestion, it's certainly worthy of consideration. Kind regards, Magdalena



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

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Vue
  • MDB Version: 5.8.2
  • Device: MacBook Pro
  • Browser: Chrome
  • OS: Mac OS X Mojave
  • Provided sample code: No
  • Provided link: No