Topic: How to apply custom styling to a navbar
ericdevjs free asked 5 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 5 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 5 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 5 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 5 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 5 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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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