Nav bar

Bootstrap Studio Help
1

Hello, I have tried to change the color of my nav bar and it wont change to white. Can you please tell me what I am doing wrong. Here is my html code and CSS. Any idea? Thanks

<h1>secondnav {</h1>

background-color: #663699; font-family: 'Aref Ruqaa'; font-size: 25px; color: #ffffff; }

<div class="col"id= "secondnav"> <nav class="navbar navbar-light navbar-expand-md"> <div class="container-fluid"><button data-toggle="collapse" data-target="#navcol-1" class="navbar-toggler">Toggle navigation</button> <div class="collapse navbar-collapse" id="navcol-1"> <ul class="nav navbar-nav"> <li role="presentation" class="nav-item">Home <li role="presentation" class="nav-item">About Us <li role="presentation" class="nav-item">Gallery <li role="presentation" class="nav-item">Boutique <li role="presentation" class="nav-item">Contact Us </div> </div> </nav> </div>

2

Do you know how to write proper CSS? (Not trying to be mean, just asking?)

This <h1>secondnav {</h1> background-color: #663699; font-family: ‘Aref Ruqaa’; font-size: 25px; color: #ffffff; }

Is wrong. It should be...

.navbar { background-color: #663699; font-family: ‘Aref Ruqaa’; font-size: 25px; color: #ffffff; }

3

Pintninja, I am not sure why the <heading1> appeared, when i copied it over because that wouldnt make sense, the below is what i have as my css. The background color changed, the font family, size. The only thing that didnt change is the color, I am not sure why it didnt change.

<h1>secondnav {</h1>

background-color: #663699; font-family: 'Aref Ruqaa'; font-size: 25px; color: #ffffff; }

4

this is really weird, that it keeps changing to my css code is written as follows

(hashtag)secondnav {

background-color: #663699; font-family: ‘Aref Ruqaa’; font-size: 25px; color: #ffffff; }

I put the word (hashtag) n because it keeps changing to h1 and that is not how it is written.

5

It's because you aren't using the "code" enclosure for showing it in code so it doesn't allow those symbols to be used at times, and sometimes misinterprets them as it is doing to you. you need to paste your code then highlight it and hit the code button on the editor. that will keep it from doing that in the forums.

6

Ahhh thank you @Jo!!!! let me see if this works. lol The below is my css code to my nav bar. I have the color set to white but it will not change. All of the other changes have taken place except the color. Any idea?

#secondnav {
  background-color: #663699;
  font-family: 'Aref Ruqaa';
  font-size: 25px;
  color: #ffffff;
}
7

The reason the text is not changing color is because the text in a nav bar isn't ordinary text, they are links. Links are styled separately from the rest of text in the site, so you have to navigate to the actual navigation buttons in the Overview (Nav Item), highlight the link, find the Bootstrap classes in the Styles tab, then copy those classes to your new CSS.

So for example, in your case it would be something like...

#secondnav .nav-link { color: #ff000; }

Don't forget you'll need to style the color for the link, its hover state, and its active state.

8

@Printninja Wow, i can't believe I didn't think of that. Thank you! It worked!!!!!!!!!