1

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.

2 respuestas 2

0

Hay dos puntos que están ocasionando tu problema:

(1) : header mal cerrrado : fíjate en la estructura HTML. Verás que tienes

    </div>
</header>
<main>
    <section>

pero debería ser:

    </header>
</div>
<main>
    <section>

(2) Position fixed mal empleado : has querido fijar el menú fijando cada elemento que lo compone. ¡Mal hecho! No debes usar position:fixed; para cada elemento del contenedor, sino usarlo para el propio contenedor. En este caso, deberías escribir position:fixed; top:0; (también te olvidaste de las coordenadas con top, right, left y bottom, aunque en este caso vale con solo top) dentro del contenedor header (o del div que lo contiene) o dentro de cada hijo del mismo

¿Por qué está mal lo que hiciste? Porque position:fixed saca del flujo del programa al contenedor a cual afecta. En cristiano: position:fixed saca del contenedor padre (y de todos los contenedores posibles) al elemento al que afecta. Al usarlo para los hijos del menú, sacabas del menú a los hijos. Así, el menú quedaba vacío y por eso no se veía el background: era un contenedor vacío, luego no hay nada que ver.

Al corregir el error, sacas el menú entero del flujo del programa, pero sus hijos, al no estar fijados (es decir, no tienen position:fixed), se mantienen dentro del menú con total normalidad. Así sacas todo como una unidad.

Verás que tendrás que hacer nuevos ajustes y demás. Por lo que veo, eres muy nuevo en esto. Te recomiendo que leas mucho la API de MDN cada vez que tengas una duda. Allí se explica muy bien cada cosa de HTML, CSS y JS y te lo ejemplifican.

Cualquier duda, pregunta :)

0

Amigo, hice como me habías comentado, pero seguí en las mismas. Así que volví a generar el menú responsive desde cero. Y finalmente conseguí que el background funcionara.

Sin embargo, ahora ya no puedo hacer scroll sobre el menú, como sí lo hacía en el anterior menú. Por lo que quisiera saber qué es lo terminé haciendo mal, ya que intentando con overflow:scroll sobre nav simplemente no funciona, incluso si intento ponerlo como nav.submenu.

Paso mis avances.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1">
<link rel="stylesheet" href="css/estilos.css">
<link rel="stylesheet" href="css/fontello.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<title>Document</title>
</head>
<body>
<header class="contenedor">
    <a href="index.html"><img class="logo1" src="images/example_logo.png"></a>
    <input type="checkbox" id="btn-menu">
    <label for="btn-menu" class="icon-menu"></label>
    <nav class="menu">
        <ul>
            <li><a href="#">Item 1</a></li>
            <li class="submenu"><a href="#">Item 2 <span class="icon-down-open"></span></a>
                <ul>
                    <li><a href="#">Sub Item 1</a></li>
                    <li><a href="#">Sub Item 2</a></li>
                    <li><a href="#">Sub Item 3</a></li>
                    <li><a href="#">Sub Item 4</a></li>
                </ul>
            </li>
            <li class="submenu"><a href="#">Item 3 <span class="icon-down-open"></span></a>
                <ul>
                    <li><a href="#">Sub Item 1</a></li>
                    <li><a href="#">Sub Item 2</a></li>
                    <li><a href="#">Sub Item 3</a></li>
                    <li><a href="#">Sub Item 4</a></li>
                </ul>
            </li>
            <li><a href="#">Item 4</a></li>
        </ul>
    </nav>
</header>
<script src="js/menu.js"></script>

CSS

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

header {
height: 70px;
position: fixed;
width: 100%;
background: #0A0C10;
color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 1000;
}

#btn-menu {
display: none;
}

header label {
font-size: 30px;
cursor: pointer;
display: none;
}

.menu ul {
background: #0A0C10;
display: flex;
list-style: none;
}

.menu ul ul {
display: none;
}

.menu a {
display: block;
padding: 22px 20px;
color: #fff;
text-decoration: none;
}

.menu ul ul a {
padding: 15px 20px;
}

.menu a:hover {
background: rgba(226, 226, 226, 0.3);
}

.menu a span {
margin-left: 10px;
}

.menu ul li:hover ul {
display: block;
position: absolute;
}

.logo1 {
position: static;
display: block;
width: 280px;
height: 45px;
top: 3%;
padding-left: 2.1%;
text-decoration: none;
font-size: 25px;
margin: 0 10px -4px;
z-index: 3;
}

@media screen and (max-width: 1024px) {
header {
    background: #0A0C10;
}

header label {
    display: block;
}

.menu {
    position: absolute;
    top: 70px;
    left: 0;
    width: 100%;
    transform: translateX(100%);
    transition: all 0.3s;
}

.menu ul {
    display: block;
    background: #555;
}

.menu ul li:hover ul {
    display: none;
    position: static;
}

.menu a {
    padding: 15px 20px;
}

.menu a span {
    position: absolute;
    right: 5px;
}

#btn-menu:checked ~ .menu {
    transform: translateX(0%);
}

.menu ul ul {
    background: rgba(0,0,0,0.4);
}

.menu ul ul a {
    padding: 15px 40px;
}

.logo1 {
    position: static;
    display: block;
    width: 280px;
    height: 45px;
    top: 3%;
    padding-left: 2.1%;
    text-decoration: none;
    font-size: 25px;
    margin: 0 10px;
    z-index: 3;
}
}

@media (max-width:768px) {
header {
    background: #0A0C10;
}

header nav {
    height: calc(100% - 80px);
}

header label {
    display: block;
}

.menu {
    position: absolute;
    top: 70px;
    left: 0;
    width: 100%;
    transform: translateX(100%);
    transition: all 0.3s;
}

.menu ul {
    display: block;
    background: #555;
}

.menu ul li:hover ul {
    display: none;
    position: static;
}

.menu a {
    padding: 15px 20px;
}

.menu a span {
    position: absolute;
    right: 5px;
}

#btn-menu:checked ~ .menu {
    transform: translateX(0%);
}

.menu ul ul {
    background: rgba(0,0,0,0.4);
}

.menu ul ul a {
    padding: 15px 40px;
}

.logo1 {
    position: static;
    display: block;
    width: 280px;
    height: 45px;
    top: 3%;
    padding-left: 2.1%;
    text-decoration: none;
    font-size: 25px;
    margin: 0 10px;
    z-index: 3;
}
}

@media screen and (max-width: 480px) {
.logo1 {
    position: static;
    display: block;
    width: 280px;
    height: 45px;
    top: 3%;
    padding-left: 2.1%;
    text-decoration: none;
    font-size: 25px;
    margin: 0 10px;
    z-index: 3;
}
}

@media screen and (max-width: 360px) {
.logo1 {
    position: static;
    display: block;
    width: 280px;
    height: 45px;
    top: 3%;
    padding-left: 2.1%;
    text-decoration: none;
    font-size: 25px;
    margin: 0 10px;
    z-index: 3;
}
}

JS

$(".submenu").click(function(){
$(this).children("ul").slideToggle();
})

$("ul").click(function(p){
p.stopPropagation();
})

Se podrá notar que al momento de pasar el cursor sobre las opciones que tienen submenú, el menu entero se despliega si, pero no hace scroll para ver el resto de opciones dentro del submenú, por lo que quisiera saber qué estoy haciendo mal ahora y cómo resuelvo esta parte, de manera que al momento de desplegar el menú, se pueda hacer scroll sobre el mismo sin que se haga scroll en toda la página entera, ya que, si se dan cuenta, si hace scroll pero es sobre la página entera y no sobre el menú desplegado.

También quisiera aprovechar para preguntar cómo puedo hacer que el menú se oculte cuando se hace clic desde afuera del mismo y que además tenga fondo oscuro, como he visto que tienen algunas páginas como la de Youtube.

De antemano, muchas gracias por las respuestas y buen día.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.