Hello together
I have placed the component “Navbar” on a page. Now the following code is displayed to me by default:
<nav class="navbar navbar-light navbar-expand-md my-auto">
The navbar is therefore placed with “navbar-light”. I would now like to change this to “navbar-dark”. I don’t want to adjust anything with CSS for this. I expected to be able to set this via the options, but I can’t find anything there.
What is the correct procedure here?
Select the navbar, then look in the option panel in the right hand tool bar in “options” or “appearance” you will be able to change to your navbar to ‘dark’
I must have a different setup or something on Mac. I can’t just choose Navbar Dark/Light etc. I can change the text color and the background color, but not the overall navbar so it’s all changed over. Am I missing something here? Am curious because I was going to answer exactly what you said earlier, but decided to wait since it didn’t do that for me lol.
You use the .navbar-light class for use with light background colours (changes text to black and grey) and you use the .navbar-dark class for dark background colours (changes text to white and grey). The background colour you change to suit and is not connected to the navbar-light or navbar-dark classes.
@jo - if you look under the options panel - you will see “background” as the first item you can modify - in there you can change to light, dark etc
Edit: didn’t see @windy’s video before replying which perfectly shows you what to select
Ok I didn’t see the change happen as the video ended too quickly. I tried it and it works, but it now gives you a navbar with navbar-light and navbar-dark applied to it. I should be changing it completely not just overwriting it I would think? And you can accomplish the same as in the video by just clicking the dropdown under the background and changing it to white. Same results anyways. Just thought it would be more cut and dry, there’s a dark version and a light version toggle. No biggie to me, but to newbies it probably is.