change to white colour font for navbar-header?

[chitranjali]

Hi guys,

I am using bootstrap css and I want the font colour of my navbar-header to be in white color, but when I put that in my css, it’s still is in blue color? when I saw in bootstrap CSS, the anchor tag seems to be having that blue color, how to override that? as class has more priority, it should be taking the color I specify right?

Attaching a codepen link here (http://codepen.io/chitranjali/pen/jAmrxg?editors=1100).

Thank you for you time and efforts.

[Atelierbram]

This should work:

.navbar-header a {
  color: white;
}

[chitranjali]

Hi Atelierbram,

It’s working, thank you, but why didn’t that work when I just applied to .navbar-header class?can u please explain if possible?

[Atelierbram]

Color is one of those properties which are inherited. Here a color-value is earlier declared on the a (link) element in Bootstrap CSS. This value will be the same on all a elements using Bootstrap unless it’s overridden (later in the cascade of CSS because the value for color is inherited): like I showed earlier, targeting that a element in that navbar-header specifically.

[Atelierbram]

Color is one of those properties which are inherited. Here a color-value is earlier declared on the a (link) element in Bootstrap CSS. This value will be the same on all a elements using Bootstrap unless it’s overridden (later in the cascade of CSS because the value for color is inherited): like I showed earlier, targeting that a element in that navbar-header specifically.

[chitranjali]

Hi Atelierbram,

I understood your point, but what I was thinking is if the custom css is called after bootstrap css in my page, then I think we need not specifically target the a inside navbar-header right? a general a{ color:white;} would be working, But I didn’t understood when the bootstrap css is loading only ( we add that from settings tab in codepen), how ever, the earlier code is now working fine without any changes from my side :/

view-source:http://codepen.io/chitranjali/full/jAmrxg/

the above is source code of my page, can u tell me where the bootstrap stylesheet is loading and my custom css is loading?

Thank you for your help! sorry for too basic questions!

[Atelierbram]

but what I was thinking is if the custom css is called after bootstrap css in my page, then I think we need not specifically target the a inside navbar-header right? a general a{ color:white;} would be working

Yes, but now all of your links will be white, so if that’s what you want that is fine of course. If the background of your main-content would be dark then that may work out.

the above is source code of my page, can u tell me where the bootstrap stylesheet is loading and my custom css is loading?

I don’t understand what you mean with “where” in this context, but you use DevTools no? Just check the head in DevTools, you will see what is going on.

[chitranjali]

Hi,

(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css ), this is the link I added in the settings page of that codepen, but when I look at that source code, I am not finding anything of this sort with <link rel=”stylesheet” > ,

but instead of that, there is
<link rel=”stylesheet” media=”screen” href=”https://assets.codepen.io/assets/fullpage/fullpage-82300606745a0f5722ec218ccdfae52a.css&#8221; />

Did that combined both bootstrap and my custom css into one? :/

[Atelierbram]

The source code is only telling you so much, and Codepen is very dynamic as well … So for an accurate representation better use DevTools inspect element. There I see in the head:

<link rel="stylesheet prefetch" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<style>
.navbar-default {
  background-color: purple;
}

ul {
  color: GREY;
}
a{
  color:white;
}
</style>

[chitranjali]

Hi Atelierbram,

Thanks for the suggestion, I will use that :), thank you for all the help .

Regards,
Chitra.

[Atelierbram]

Good luck, but now I think about it, in Codepen you can also use “Debug Mode” (Change View -> Debug Mode) and then do view source. Take care.

[Author]

Posts