1

I have some of my code organized like this:

<div class="row">
  <nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#">FAQ</a></li>

I need to change the the background color of the active class and i also need to change the color of 'Home' and 'FAQ'. How can I do it? I tried a million different ways, but I'm new at HTML/CSS and I'm having some difficulties.

Tomas Ramirez Sarduy
  • 17,294
  • 8
  • 69
  • 85
Sara_Rua
  • 13
  • 2

3 Answers3

-1

i need to change the the background color of the active class

You can change the background of the active class by adding the following to your CSS:

.active{background:red;}

and i also need to change the color of 'Home' and 'FAQ'

You can target both Home and FAQ with the 'a' selector since they are both text nodes inside 'a' elements.

.nav a{background:blue;}

Edit: Now that you have expanded your question to modifying the text, here are a few additional examples.

If you want to modify the nav bar text link properties you can use the following CSS:

.navbar-default .navbar-nav>li>a{ color:green; font-size:15px; font-weight:bold; }

If you want to modify the nav bar drop down text link properties you can use the following CSS:

.dropdown-menu>li>a{ color:blue; }

Making the modifications will make your site look like this:

enter image description here

xengravity
  • 3,501
  • 18
  • 27
  • You are changing both backgrounds, the OP says to change the color of the links, and the `background-color` to the active element – Tomas Ramirez Sarduy Apr 24 '15 at 02:40
  • I am being able to change the background of everything, the thing is the text manipulation! i dont want to change style inside of the html file all the time.... – Sara_Rua Apr 24 '15 at 14:05
  • @Sara_Rua I updated my answer with your new requests. Let me know if that helps. – xengravity Apr 24 '15 at 14:47
  • man! you are a genious...! the .active doesnt work in my project. the rest.... work like a charme! I manage [i think...] to understand what you did and i changed the active bar text to white too – Sara_Rua Apr 24 '15 at 14:56
-1
.active {
    background:#333 !important;
}

for other links you want to edit you can add a class:

<li><a href="#" class="navLinks">FAQ</a></li>

and then style that class similar to active class

.navLinks {
    background:#333 !important;
}

I used !important because I can't see your code live so I don't know if bootstrap is overriding. I assume you are using bootstrap because I am familiar with the code. Try the css provided without !important first to see if that works. You would add this in either a style sheet that is linked to your page or in the head of the document. Visit this site for more info on css and html http://www.w3schools.com/css/

Charlie
  • 163
  • 8
  • Be careful with the `!important`, use it just in cases you really need it – Tomas Ramirez Sarduy Apr 24 '15 at 02:35
  • thats why I suggested testing css without !important first. Without all the code I can't test and see for myself. Sometimes with bootstrap you need to use !important to override. I work with bootstrap everyday and sometimes you run into these issues. Assuming this is bootstrap, the code looks exactly the same. – Charlie Apr 24 '15 at 02:40
  • Even with bootstrap, is very robust and there is always a way to do it without `!important`, adding an id to the parent, overriding the class, etc – Tomas Ramirez Sarduy Apr 24 '15 at 02:43
  • Yes thats true when you have access to all the code I agree with you, but we don't know Sara_Rua's situation and what access they have and to which files because not enough information was given. Everyone on here thought this person needed help styling a link. I am providing the best answer based on what is provided. From my experience when you don't have access to all the files or if you are working on a wordpress site !important can be a be your best friend. This doesn't mean you should use it all the time. – Charlie Apr 24 '15 at 02:52
  • Then ask in a comment *Do you have access to all the code?*, and how can you be working in a wordpress site whitout having access to the code? At least you will be able to the `php` files and add some css rules. Very nice article by Chris Coyer, but it's about other cases, [check this](http://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css) – Tomas Ramirez Sarduy Apr 24 '15 at 03:04
  • In my original post I stated, "I used !important because I can't see your code live so I don't know if bootstrap is overriding." Also I said, "First try the css provided without !important to see if that works." My goal here is to help the person asking the question and provide examples from my own experience. In my experience there has been instances where the !important tag was useful. – Charlie Apr 24 '15 at 03:53
  • It didnt work either way. How can i show my code without puting it all here, in a really boring stupid way? the webpage i want to do is this one: http://ltideq.ist.utl.pt/sara and my goal is to change the navbar configuration. I manage to change some color and border-radius, but not the style of the text itself! no matter what i do, it doesnt work if i only use css. this is based on bootstrap, btw. – Sara_Rua Apr 24 '15 at 14:16
-1

It's quite simple, you just need to define the CSS for those items. Here is an example:

ul.nav li { background-color: #ff0000; } 
ul.nav li.active { background-color: #00ff00; }
Nisse Engström
  • 4,738
  • 23
  • 27
  • 42
Paul I
  • 1
  • 1