-2

I'm building a website but for some reason my color: white is not working.

The code which is not working: 

.main-navbar-heading-2 {
    position: absolute;
    top: 5px;
    left: 5px;
    text-decoration: none;
    color: white !important;
    font-family: Raleway;
    font-size: 1.3em;
}

My fiddle: https://jsfiddle.net/5rpy02er/

moopet
  • 6,014
  • 1
  • 29
  • 36
Shreyas Sreenivas
  • 331
  • 1
  • 5
  • 12

4 Answers4

1

Your text is behind the other layer. Put z-index:

  z-index: 10;

See it working:

https://jsfiddle.net/5rpy02er/1/

PS: The color is working perfectly.

Marcos Pérez Gude
  • 21,869
  • 4
  • 38
  • 69
0

Color is working fine problem is with your z-index

.main-navbar-heading-2 {
        position: absolute;
        top: 5px;
        left: 5px;
        text-decoration: none;
        color: white !important;
        font-family: Raleway;
        font-size: 1.3em;
        z-index:9;
    }

Here is the updated fiddle : https://jsfiddle.net/5rpy02er/2/

Gaurav Aggarwal
  • 9,809
  • 6
  • 36
  • 74
0

Just add z-index to it main-navbar-heading-2.

z-index:10;
user3458271
  • 638
  • 12
  • 31
0

Just a further precision, you don't need to put !important property on color, it's working fine.

Like it said above, you have to add z-index property since the content is in absolute position and in the first place. By default, it's value is set to 1 and the second element has a value of 2.

That's why you have to put a value superior or equal to 2 to make it appears in front of the other one that occupy 100% on the width.

See this very good post on SO to understand more the use of the z-index property : Z-Index Relative or Absolute?

Community
  • 1
  • 1
Vincent G
  • 8,547
  • 1
  • 18
  • 36