tengo un problema, a ver si alguien me puede ayudar.
Resulta que estoy rediseñando el menú de mi sitio web, dado que lo quiero fijar, de manera tal que al hacer scroll sobre la página, el menú quede visible.
Hasta ahora, he conseguido hacer que se quede fijo al momento de hacer scroll. Sin embargo, ahora tengo un problema. Y es que resulta que no consigo que se pinte todo el encabezado, de manera tal que al momento de hacer scroll y quede visible el menú, quede el color puesto en background.
Hasta ahora estos son mis avances, y no he podido resolver este último problema.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>HC Trials</title>
<link rel="stylesheet" href="estilos.css">
<link rel="stylesheet" href="font-face.css">
<link rel="stylesheet" href="fontello.css">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
</head>
<body>
<div>
<header class="container">
<a href="index.php"><img class="logo1" src="images/logo.png"></a>
<div class="menu_bar">
<label for="menu_bar" class="icon-menu"></label>
</div>
<nav>
<ul>
<li class="submenu">
<a href="javascript:void(0);">Submenú 1</a>
<ul class="children">
<li><a href="#">Opción 1</a></li>
<li><a href="#">Opción 2</a></li>
<li><a href="#">Opción 3</a></li>
<li><a href="#">Opción 4</a></li>
</ul>
</li>
<li class="submenu">
<a href="javascript:void(0);">Submenú 2</a>
<ul class="children">
<li><a href="#">Opción 1</a></li>
<li><a href="#">Opción 2</a></li>
<li><a href="#">Opción 3</a></li>
<li><a href="#">Opción 4</a></li>
</ul>
</li>
<li><a href="#">Submenú 3</a>
</li>
<li><a href="#">Submenú 4</a></li>
<li><a href="#">Submenú 5</a></li>
</ul>
</nav>
</div>
</header>
<main>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris metus purus, sagittis sed eleifend nec, efficitur quis tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed interdum nisl lectus, sed vulputate massa dapibus ullamcorper. Phasellus lobortis nibh eget risus tempus hendrerit. Sed tristique ante justo, sed convallis nunc rutrum ac. Curabitur arcu nunc, scelerisque eu nunc dictum, malesuada interdum ipsum. Sed id volutpat odio, nec placerat magna. Vestibulum ultricies molestie mi, ac aliquet nisi condimentum a. Suspendisse potenti. Nunc vehicula lorem id lorem volutpat pretium. Sed ultrices purus purus, in laoreet ligula imperdiet a. Aliquam ac scelerisque ante, sit amet elementum odio. Aliquam dapibus gravida elit, et pharetra sem.</p>
<p>Aenean at sem vel justo elementum porttitor pulvinar vel mauris. Aliquam varius eu nulla at cursus. Duis in risus et nulla posuere imperdiet. Cras at elit et erat porta scelerisque. Integer orci dolor, facilisis tristique imperdiet ut, posuere ac lorem. Suspendisse urna dolor, cursus vel commodo sed, blandit vel lorem. Aliquam ac enim pulvinar, lobortis ex a, dignissim diam. In leo quam, vehicula et rutrum vel, egestas id elit. Aenean gravida, dui vel pretium tempor, odio diam consequat justo, et imperdiet risus nulla eu nunc. Sed id est posuere ligula pharetra convallis a vel tortor. Quisque a rutrum ante.</p>
<p>Vivamus id sapien vel neque iaculis vestibulum. Quisque dictum non nibh sed vehicula. Nunc ac pellentesque enim. Morbi accumsan nibh nulla, at pellentesque ex dapibus quis. Aenean volutpat urna id quam bibendum maximus. Morbi ultrices scelerisque massa. Nulla vitae vulputate odio. Fusce nec est pulvinar, dictum odio non, rutrum sem. In magna metus, euismod nec justo id, feugiat porttitor mi. Donec ligula diam, tristique eget magna et, condimentum commodo ex. Cras sollicitudin facilisis dignissim. Donec a enim lacus. Morbi vehicula leo ultricies nulla vulputate, in egestas lorem mattis.</p>
<p>Cras condimentum finibus nunc lobortis dapibus. Pellentesque pretium quam a varius varius. Morbi lobortis interdum diam sit amet vulputate. Pellentesque varius blandit elit. Praesent efficitur ipsum in est sollicitudin laoreet. Suspendisse posuere, mi sed pulvinar sagittis, felis lorem tincidunt lorem, non maximus nisi ex ac ante. Nulla iaculis luctus elit ac cursus. Nullam hendrerit dui nisl, non lacinia ipsum dapibus vel. Nam at viverra quam. Ut ultricies elit ac velit mollis semper.</p>
<p>raesent a luctus dolor, nec pellentesque nisi. In eget ultricies nisl. Nunc congue elit ac sapien consequat, quis fringilla sapien eleifend. Sed elementum interdum erat, eu malesuada libero finibus at. Aliquam eleifend luctus tortor at pharetra. Aliquam vulputate bibendum sapien non eleifend. Sed ac purus vitae elit luctus scelerisque ac sit amet erat. Etiam commodo eros posuere nunc facilisis, non consequat lacus dapibus. Nunc non eros ac sapien finibus dictum id vitae odio. Vivamus at lectus eu enim consectetur eleifend. Proin sed rhoncus tellus. Donec sed lacinia augue, vitae iaculis turpis.</p>
<p>Nunc et lectus consequat, efficitur velit nec, aliquet nunc. Phasellus tempor ornare nunc sed congue. Integer fermentum urna id ipsum eleifend commodo. Duis aliquet sagittis sem nec interdum. Sed sed nibh turpis. Nulla id nisl enim. Donec tincidunt venenatis viverra. Praesent sit amet nulla fringilla nibh iaculis finibus. Nulla lobortis mi risus, et faucibus mi efficitur dapibus. Donec at ipsum vel lectus imperdiet commodo. Ut et tincidunt velit. Nam accumsan lobortis est, quis molestie dolor egestas ac. Nam dui neque, faucibus eget sem in, ullamcorper convallis neque. Morbi quam justo, placerat et est quis, convallis tincidunt eros.</p>
<p>Etiam in volutpat purus. Aenean viverra hendrerit odio, bibendum lobortis mi. Cras mattis mauris tortor, ac maximus lectus dignissim ac. Aenean finibus vestibulum velit finibus iaculis. Suspendisse porta urna id est rhoncus placerat eget in orci. Curabitur semper tortor vitae finibus posuere. Nulla quis nibh metus. Proin et tincidunt augue, a congue ante. Nullam non felis sed lorem vehicula finibus vitae eget arcu. Phasellus vitae dolor vitae sapien laoreet molestie nec at sapien. Curabitur varius magna et tempor bibendum. Nullam condimentum in tellus sed egestas. Phasellus enim diam, facilisis ut risus sit amet, aliquam laoreet quam. Etiam consectetur enim in risus cursus dapibus. Pellentesque sed pharetra felis.</p>
<p>Nunc et lectus consequat, efficitur velit nec, aliquet nunc. Phasellus tempor ornare nunc sed congue. Integer fermentum urna id ipsum eleifend commodo. Duis aliquet sagittis sem nec interdum. Sed sed nibh turpis. Nulla id nisl enim. Donec tincidunt venenatis viverra. Praesent sit amet nulla fringilla nibh iaculis finibus. Nulla lobortis mi risus, et faucibus mi efficitur dapibus. Donec at ipsum vel lectus imperdiet commodo. Ut et tincidunt velit. Nam accumsan lobortis est, quis molestie dolor egestas ac. Nam dui neque, faucibus eget sem in, ullamcorper convallis neque. Morbi quam justo, placerat et est quis, convallis tincidunt eros.</p>
<p>Nunc et lectus consequat, efficitur velit nec, aliquet nunc. Phasellus tempor ornare nunc sed congue. Integer fermentum urna id ipsum eleifend commodo. Duis aliquet sagittis sem nec interdum. Sed sed nibh turpis. Nulla id nisl enim. Donec tincidunt venenatis viverra. Praesent sit amet nulla fringilla nibh iaculis finibus. Nulla lobortis mi risus, et faucibus mi efficitur dapibus. Donec at ipsum vel lectus imperdiet commodo. Ut et tincidunt velit. Nam accumsan lobortis est, quis molestie dolor egestas ac. Nam dui neque, faucibus eget sem in, ullamcorper convallis neque. Morbi quam justo, placerat et est quis, convallis tincidunt eros.</p>
<p>Nunc et lectus consequat, efficitur velit nec, aliquet nunc. Phasellus tempor ornare nunc sed congue. Integer fermentum urna id ipsum eleifend commodo. Duis aliquet sagittis sem nec interdum. Sed sed nibh turpis. Nulla id nisl enim. Donec tincidunt venenatis viverra. Praesent sit amet nulla fringilla nibh iaculis finibus. Nulla lobortis mi risus, et faucibus mi efficitur dapibus. Donec at ipsum vel lectus imperdiet commodo. Ut et tincidunt velit. Nam accumsan lobortis est, quis molestie dolor egestas ac. Nam dui neque, faucibus eget sem in, ullamcorper convallis neque. Morbi quam justo, placerat et est quis, convallis tincidunt eros.</p>
<p>Nunc et lectus consequat, efficitur velit nec, aliquet nunc. Phasellus tempor ornare nunc sed congue. Integer fermentum urna id ipsum eleifend commodo. Duis aliquet sagittis sem nec interdum. Sed sed nibh turpis. Nulla id nisl enim. Donec tincidunt venenatis viverra. Praesent sit amet nulla fringilla nibh iaculis finibus. Nulla lobortis mi risus, et faucibus mi efficitur dapibus. Donec at ipsum vel lectus imperdiet commodo. Ut et tincidunt velit. Nam accumsan lobortis est, quis molestie dolor egestas ac. Nam dui neque, faucibus eget sem in, ullamcorper convallis neque. Morbi quam justo, placerat et est quis, convallis tincidunt eros.</p>
</section>
</main>
</body>
<script src="jquery2.min.js"></script>
<script src="menu.min.js"></script>
</html>
Mi avance en cuanto al código CSS
/*Header*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
background: #0A0C10;
}
header {
display: block;
justify-content: flex-end;
align-items: center;
}
header label {
font-size: 30px;
cursor: pointer;
display: none;
}
.logo1 {
position: fixed;
display: block;
width: 300px;
height: 47px;
top: 3%;
padding-left: 2.1%;
text-decoration: none;
font-size: 25px;
margin: 0 auto;
z-index: 3;
}
/*Material Icons Styling*/
.material-icons.md-light {
color: rgba(204, 204, 204, 1);
}
.material-icons.md-light.md-inactive {
color: rgba(204, 204, 204, 0.3);
}
.material-icons.md-dark {
color: rgba(0, 0, 0, 0.54);
}
.material-icons.md-dark.md-inactive {
color: rgba(0, 0, 0, 0.26);
}
@media screen and (max-width: 1024px) {
header label {
display: block;
position: absolute;
z-index: 3;
right: 8px;
top: 17px;
color: #fff;
text-shadow: 1px 1px #303030
}
.logo1 {
color: black;
position: fixed;
display: block;
width: 300px;
height: 47px;
top: 2%;
left: 0;
padding-left: 2.1%;
text-decoration: none;
font-size: 25px;
text-decoration: none;
margin: 0 auto;
z-index: 3;
}
}
@media screen and (max-width: 768px) {
header label {
display: block;
position: absolute;
z-index: 3;
right: 8px;
top: 17px;
color: #fff;
text-shadow: 1px 1px #303030
}
.logo1 {
color: black;
position: fixed;
display: block;
width: 300px;
height: 47px;
top: 2%;
left: 0;
padding-left: 2.1%;
text-decoration: none;
font-size: 25px;
text-decoration: none;
margin: 0 auto;
z-index: 3;
}
}
@media screen and (max-width: 360px) {
header label {
display: block;
position: absolute;
z-index: 3;
right: 8px;
top: 17px;
color: #fff;
text-shadow: 1px 1px #303030
}
.logo1 {
color: black;
position: fixed;
display: block;
width: 300px;
height: 47px;
top: 2%;
left: 0;
padding-left: 2.1%;
text-decoration: none;
font-size: 25px;
text-decoration: none;
margin: 0 auto;
z-index: 3;
}
}
/*Nav Menu*/
.menu_bar {
display:none;
}
header nav {
background: #0A0C10;
display: block;
position: fixed;
z-index: 3;
right: 25px;
margin-top: 28px;
}
header nav ul {
list-style:none;
display: flex;
}
header nav ul li {
display:inline-block;
}
header nav ul li a {
display: block;
padding: 0px 6px 3px;
color: #fff;
text-decoration: none;
text-shadow: 1px 1px #303030;
font-family: 'ITCStoneSerif-Std-MediumItalic';
font-size: 18px;
font-weight: 500;
}
header nav ul li a:hover {
color: #ffffff;
background:#003C56;
transition: all 0.5s ease;
}
header nav ul li:hover .children {
display:block;
}
header nav ul li .children {
display: none;
position: absolute;
z-index:1000;
}
header nav ul li .children li {
background:#0A0C10;
display:block;
overflow: hidden;
}
header nav ul li .children li a span {
float: right;
position: relative;
top:0px;
margin-right:0;
margin-left:10px;
}
header nav ul li .caret {
position: relative;
top:3px;
margin-left:10px;
margin-right:0px;
}
@media screen and (max-width: 800px) {
body {
padding-top:0px;
}
.menu_bar {
display:block;
width:100%;
position: fixed;
top:0;
background:#023859;
}
.menu_bar .bt-menu {
display: block;
padding: 20px;
color: #fff;
overflow: hidden;
font-size: 25px;
text-decoration: none;
}
.menu_bar span {
float: right;
font-size: 40px;
}
header nav {
background:#023859;
width: 80%;
height: calc(100% - 80px);
position: fixed;
right:-100%;
margin: 0;
margin-top: 60px;
overflow: scroll;
}
header nav ul {
display: block;
}
header nav ul li {
display: block;
border-bottom:1px solid rgba(255,255,255,.5);
}
header nav ul li a:hover {
color: #ffffff;
transition: all 0.5s ease;
}
header nav ul li a {
display: block;
padding: 20px;
}
header nav ul li:hover .children {
display: none;
}
header nav ul li .children {
width: 100%;
position: relative;
}
header nav ul li .children li {
background:#011826;
border-bottom: 1px solid rgba(255,255,255,.5);
}
header nav ul li .children li a {
margin-left:20px;
}
header nav ul li .caret {
float: right;
}
}
@media screen and (max-width: 768px) {
header nav ul li a {
color: #fff;
text-decoration: none;
text-shadow: 1px 1px #303030;
font-family: 'ITCStoneSerif-Std-MediumItalic';
}
}
@media screen and (max-width: 480px) {
header nav ul li a {
color: #fff;
text-decoration: none;
text-shadow: 1px 1px #303030;
font-family: 'ITCStoneSerif-Std-MediumItalic';
}
}
@media screen and (max-width: 360px) {
header nav ul li a {
color: #fff;
text-decoration: none;
text-shadow: 1px 1px #303030;
font-family: 'ITCStoneSerif-Std-MediumItalic';
}
}
/*General*/
main {
padding: 5rem 1rem;
}
De antemano, agradezco sus respuestas. Saludos.