CSS position:fixed - background-color disappear - css

Question

This is the example : https://jsfiddle.net/5ahw3tec/
HTML
html body {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-decoration: none;
font-family: 'Noto Sans KR', sans-serif;
list-style: none;
}
a {
text-decoration: none;
}
body {
background: lightgrey;
margin: 0;
}
.container {
background-color: #ffffff;
width: 1280px;
padding: 0;
}
#gnb {
width: 1280px;
height: 80px;
z-index: 100;
position: fixed;
}
#gnb .header-area img {
position: relative;
top: 25px;
left: 80px;
}
#gnb .header-area nav {
position: relative;
width: 930px;
left: 280px;
}
#gnb .header-area ul {
list-style: none;
display: flex;
padding: 0;
}
#gnb .header-area li {
margin-left: 80px;
}
#gnb .header-area li a {
color: #333333;
}
#gnb .header-area li:nth-of-type(1) {
margin-left: 0;
}
#gnb .header-area li a:hover {
color: #18d28b;
text-decoration: none;
}
main {
width: 100%;
height: 800px;
background: pink;
}
<div class="container">
<header id="gnb">
<div class="header-area">
<a href="#">
<img src="somelogo" alt="">
</a>
<nav>
<ul>
<li>HELLO</li>
<li>HELLO</li>
<li>HELLO</li>
<li>HELLO</li>
</ul>
</nav>
</div>
</header>
<main>
</main>
<footer>
</footer>
</div>
CSS
When I scroll down, the fixed menu bar(logo image and some lists) is located in the top of the page.
But, there is an issue.
When I apply position:fixed to #gnb (in the example above),
the background color(white) that I made earlier is disappeared. I don't know what the problem is exactly..
I want to keep the effect of background color too.
I am applying Bootstrap for container class, but not for the menu bar.

Answer 1

Why does the background color disappear?
Well, you set the color to your container Element, and without any other specifications, the child elements inherit the white background (that's why you override it with pink!)
Setting your Header to position: fixed decouples the #gnb Element from his parent, so it does not have any background color, until you specify one and the color of the element below is visible (which is pink). So you have to manually set the color to white again.
So the answer of Jainam is correct, just add
background-color: #fff to your #gnb

Answer 2

Try below css for this:
see Fiddle Demo
CSS:
html body {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-decoration: none;
font-family: 'Noto Sans KR', sans-serif;
list-style: none;
}
a {
text-decoration: none;
}
/* End global */
body {
background: lightgrey;
margin: 0;
}
.container {
background-color: #ffffff;
width: 100%;
padding: 0;
}
#gnb {
width: 1280px;
height: 80px;
z-index: 100;
position: fixed;
background-color: #fff;
}
#gnb .header-area img {
position: relative;
top: 25px;
left: 80px;
}
#gnb .header-area nav {
position: relative;
width: 930px;
left: 280px;
}
#gnb .header-area ul {
list-style: none;
display: flex;
padding: 0;
}
#gnb .header-area li {
margin-left: 80px;
}
#gnb .header-area li a {
color: #333333;
}
#gnb .header-area li:nth-of-type(1) {
margin-left: 0;
}
#gnb .header-area li a:hover {
color: #18d28b;
text-decoration: none;
}
main {
width: 100%;
height: 800px;
background: pink;
}

Answer 3

for fixed menu - use margin-top , top: 0
html body {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-decoration: none;
font-family: 'Noto Sans KR', sans-serif;
list-style: none;
}
a {
text-decoration: none;
}
body {
background: lightgrey;
margin: 0;
}
.container {
background-color: #ffffff;
width: 1280px;
padding: 0;
}
/*new */
header {
background-color: #ffffff;
}
#gnb {
width: 1280px;
height: 80px; /* based on this height */
z-index: 100;
position: fixed;
top: 0; /* new */
}
#gnb .header-area img {
position: relative;
top: 25px;
left: 80px;
}
#gnb .header-area nav {
position: relative;
width: 930px;
left: 280px;
}
#gnb .header-area ul {
list-style: none;
display: flex;
padding: 0;
}
#gnb .header-area li {
margin-left: 80px;
}
#gnb .header-area li a {
color: #333333;
}
#gnb .header-area li:nth-of-type(1) {
margin-left: 0;
}
#gnb .header-area li a:hover {
color: #18d28b;
text-decoration: none;
}
main {
margin-top: 80px;
/* new - based on height given at #gnb */
width: 100%;
height: 800px;
background: pink;
}
<div class="container">
<header id="gnb">
<div class="header-area">
<a href="#">
<img src="somelogo" alt="">
</a>
<nav>
<ul>
<li>HELLO</li>
<li>HELLO</li>
<li>HELLO</li>
<li>HELLO</li>
</ul>
</nav>
</div>
</header>
<main>
some text
</main>
<footer>
</footer>
</div>