Navbar Color Not working in the panel nor adding CSS helps.

Bootstrap Studio Help
1

I am simply trying to change the color of the navbar to white and its not taking effect. I choose the navbar element, navbar item, or the nav itself and from the right panel I set the font color to white but nothing changes. Is there a default font color that I have to turn off somewhere?

Thanks in advance

2

I eventually had to select it like the following to update the color: this worked but the panel doesnt work

.navbar-light .navbar-nav .nav-link {color:white;}

5

I'm not sure what you were doing to where it didn't work, but technically what you ended up doing is what you should be doing. You select the element and then in the Style Attribute dropdown you select to create CSS block and then edit the color. If you don't do that then you tend to use what are called inline-styles and in today's age you really shouldn't do that unless you really have to.

But in the end you did what you should do :)

Saj

6

The problem is when i use the panel on the right (ex to change a color, justify text or anything similar) it adds the css rules as inline. I even create a class for the element but then again I have to be writing css codes. So what is the point of that panel? I dont get it. It adds it all as inline.

7

That first dropdown in the Options pane where the "Style Attribute" is set by default (meaning style using inline styles), you need to make sure that it's actually set to the CSS block you want to style. If it doesn't have one, you need to select Create CSS Block. Once that's created (gets created in your custom css file), you need to select the new CSS rule it created in that dropdown. Then once that's selected then when you style it will be written to the css rule and not inline.

There are no predefined rules in there I guess since you can't edit the bootstrap.css file. So you have to create a new rule or you can copy and existing bootstrap.css rule to your custom css file which will then appear in that dropdown but you must select it for it to write to the rule. Without a rule selected it will be inline then.

Saj

8

If you are referring to SCSS it's treated in the app like bootstrap.css, "locked", so you can't edit SCSS coding from the "Look and Feel" Options pane panel. When you create a new CSS block in the dropdown it will create that CSS rule in a new CSS file if you don't already have one. It will not edit your .scss files. That's all freehand manual editing.

Saj