how to custom style the navbar-( link colors and active link

Topic: how to custom style the navbar-( link colors and active link, hover etc-) which style sheet do I find the correct styles to change?

random free asked 3 years ago

Hi and thanks in advance. Great job on your development of MDB, a fantastic resource! I'm using MD bootstrap free based on bootstrap 4;

I've had a little experience building with bootstrap and expected to look in one of the style-sheets to find and modify navs and navbar parts. Having trouble finding exactly WHERE to look.

Expected behavior

Normally I would look in one of the style sheets, find the part that I am trying to change, then put snippets in my own style sheet to override default behaviors.

Actual behavior In practice as a newbe to MDB I cant seem to find ANYTHING except inline CSS that will change what I;m trying to do ie drop down background-color, link color, a link color, hover color/behavior etc. Are those somewhere else? named differently? classed differently?

I can style with inline css to a point but not enough and not preferable.

Thanks for your help!

Resources (screenshots, code snippets etc.)

style="background-image: linear-gradient(to top, #6863ba 0%, #3b1361 100%) !important; opacity:0.85 !important;">

Add comment

random free answered 3 years ago

0 0 Best answer

Hello Marcin!

I appreciate your answers VERY much! That helps clarify a great deal and gets me on the way. You did a good job of explaining.

I took your other advice and started all of that, and as a result I am getting better results already, and, I can see that in the future the tools will be invaluable.

Thanks again, stay safe, and may you and your family be well

R. Andom

Marcin Luczak staff commented 3 years ago

Thank you for your words, I'm glad to hear that everything works fine now. I wish you successful work with our products.

Regards, Marcin

Add comment

random free answered 3 years ago

0 0 Best answer

Hi MarcinThanks for your reply. I REALLY appreciate your prompt and specific response. I'll have a go at that solution later today.

I'm using the free version, MDB-Free_4.19.1 to "get my toes wet" so to speak.

Two things: One in regard to your reply and another related to my original question.

First related to your reply:I had gone through those files and experimented with changing link color in what I "thought" was the correct class ( ex. #fff changed to #000)only to see no change in the page when I reloaded it, so I changed things back.

Is that because I did not use Gulp? (I'll have to learn is as I've not used Gulp or Sass)? Also would I not use the blank/empty style.css that was included in "/css" for my edits as in bootstrap?

Second, related to part of my original message:Are the class names that I would be looking for the same as in bootstrap? Or does MDBootstrap change some of the names and classes that I would be looking for?

Please insert min. 20 characters.

Hi MarcinThanks for your reply. I REALLY appreciate your prompt and specific response. I'll have a go at that solution later today.

I'm using the free version, MDB-Free_4.19.1 to "get my toes wet" so to speak.

Two things: One in regard to your reply and another related to my original question.

First related to your reply:I had gone through those files and experimented with changing link color in what I "thought" was the correct class ( ex. #fff changed to #000)only to see no change in the page when I reloaded it, so I changed things back.

Is that because I did not use Gulp? (I'll have to learn is as I've not used Gulp or Sass)? Also would I not use the blank/empty style.css that was included in "/css" for my edits as in bootstrap?

Second, related to part of my original message:Are the class names that I would be looking for the same as in bootstrap? Or does MDBootstrap change some of the names and classes that I would be looking for?

Marcin Luczak staff commented 3 years ago

Hello,

For your first question: Yes, it was because you didn't use any sass compiler. Using style.css inside css folder is also a way to do it. You just have to remember to use !important if you want to overwrite our default styles, e.g. if you want to change the button box-shadow property then you would write : .btn { box-shadow: none !important }

MDBootstrap classes should mostly be similar to those in bootstrap, but to be 100% sure you are using good classes you can always check our documentation: https://mdbootstrap.com/docs/jquery/

Best regards, Marcin

Please insert min. 15 characters.

Add comment

Marcin Luczak staff answered 3 years ago

1 0 Best answer

Hello,

Thank you for your feedback, we really appreciate that! Depending on which version of MDB you are using you can search for <code>_custom-styles.scss</code> or <code>_custom.scss</code> files inside the MDB repository to which you can add your custom styles. To make it work you will have to use any type of file bundlers such as Gulp or Webpack to compile your .scss files. Otherwise, you'll have to include any custom styles directly inside <code><style></code> tag in your HTML <code><head></code> or in inline styles.

You can check how to use Gulp or Webpack from our tutorials:

Gulp : <a href="https://mdbootstrap.com/education/bootstrap/gulp-installation/" target="_blank">https://mdbootstrap.com/education/bootstrap/gulp-installation/</a>

Webpack : <a href="https://mdbootstrap.com/articles/jquery/md-bootstrap-webpack-tutorial/" target="_blank">https://mdbootstrap.com/articles/jquery/md-bootstrap-webpack-tutorial/</a>

I hope that this will help you, Regards, Marcin

Please insert min. 20 characters.

Hello,

Thank you for your feedback, we really appreciate that! Depending on which version of MDB you are using you can search for _custom-styles.scss or _custom.scss files inside the MDB repository to which you can add your custom styles. To make it work you will have to use any type of file bundlers such as Gulp or Webpack to compile your .scss files. Otherwise, you'll have to include any custom styles directly inside <style> tag in your HTML <head> or in inline styles.

You can check how to use Gulp or Webpack from our tutorials:

Gulp : https://mdbootstrap.com/education/bootstrap/gulp-installation/

Webpack : https://mdbootstrap.com/articles/jquery/md-bootstrap-webpack-tutorial/

I hope that this will help you, Regards, Marcin

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

ForumUser: Free
Premium support: No
Technology: General Bootstrap questions
MDB Version: -
Device: all
Browser: all
OS: all
Provided sample code: No
Provided link: No

random

45Support score
3Questions 3Answers 0Snippets