CODEWITHSUNDEEP
htmlcss
Troy Wu
Troy Wu

Reputation: 67

Why the color of my header will change?

**CSS**

@charset "utf-8";
@import 'https://fonts.googleapis.com/css?family=Alegreya+Sans';
/* CSS Document */
*{
	margin: 0;
	padding: 0;
	border: 0;
}
body{
	background: #EFEFEF;
	color: black;
	font-family: Cambria, Hoefler Text, Liberation Serif, Times, Times New Roman, serif;
	margin: 0;
}
header{
	width: 100%;
	background: rgba(10,37,195,0.76);
	height: 50px;
}
#header-inner{
	max-width: 1200px;
	margin: 0 auto;
}
nav{
	float: right;
	padding: 10px 0;
}
#menu-icon{
	height: 40px;
	width: 40px;
	display: hidden;
	background: url(../img/NAV.png) no-repeat center;
}
ul{
	list-style-type: none;
}
nav ul li{
	font-family: 'Alegreya Sans', sans-serif;
    font-size: 150%;
    display:inline-block;
    float: left;
    padding: 10px;
}
nav ul li a{
	text-decoration: none;
	color:aliceblue;
}
nav ul li a:hover{
	color: rgba(208,208,208,0.90);
}
/*---end navbar---*/

#banner{
	width: 100%;
	height: 200px;
}
#banner-inner{
	width: 100%;
	height: 50vw;
}
/*------media----*/

@media screen and (max-width: 768px){
    header{
        position: absolute;
    }
    #logo{
        margin: 15px 0 20px -25px;
        background: url(img/RD_mobile.png) no-repeat center;
    }
    #menu-icon{
        display: inline-block;
    }
    nav ul, nav:active ul{
        display: none;
        z-index: 1000;
        position: absolute;
        padding: 20px;
        background: #6991AC;
        right: 50px;
        top: 60px;
        border: 1px solid #FFF;
        border-radius: 10px 0 10px 10px;
        width: 50%;
    }
    nav:hover ul{
        display: block;
    }
    nav li{
        text-align: center;
        width: 100%;
        padding: 10px 0;
	}
}
**HTML**
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style/homecss.css">
</head>
<body>
 <header>
        <div id="hearder-inner">
           <a href="home.html" id="logo"></a>
            <nav>
                <a href="#" id="menu-icon"></a>
                <ul>
                    <li><a href="home.html" class="current">Home</a></li>
                    <li><a href="#" >About</a></li>
					<li><a href="#" >Gallery</a></li>
                </ul>
            </nav>
        </div>
    </header>
<!---ending header-->
<section id="banner">
	<img id="banner-img" src="img/20140505211825_YY8Un.jpeg">
</section>
</body>
</html>

Once I add media on the css, whenever the header meets the condition of the media its color will change to darker. I don`t understand. I only add one color on the header, why will it change to second color as the navbar become smaller?

Upvotes: 1

Views: 217

Answers (1)

l.varga
l.varga

Reputation: 871

The colour of the header itself does not change. What changes is that it previously occupied space and thus pushed the image down, however, you position the header as an absolute element for sizes up to 768px width. Which means the header is taken out of normal document flow. Now the image isn't pushed down and instead, the header overlaps the image.

As the header has an alpha value of background less than 100 (background: rgba(10,37,195,0.76);) and is thus only at 76% opacity, any change in background colour of element below the header will affect the perceived colour of your header. I am guessing the image is darker than the header and thus the header looks to become darker.

You can fix this by either defining a background of the header with alpha channel at 1 (eg. rgb(10, 37, 195);) - considering your body background is almost white and that the header for widths over 768px only gets mixed with that constant "#efefef" value, it's easy to determine a colour that'll work for you. Or you can solve it by not taking the header out of the normal document flow (by not using position absolute) or by adding padding/margin top to container of the image and (presumably) the rest of the document with the same value as the height of the header (eg 100px, if that's the header's height). Obviously, only add that for screen widths up to 768px.

Upvotes: 1

Related Questions