1

Realizando un topNav me encontré con el problema de que al poner el elemento <nav> dentro de un section al cual le agregue una seudo clase :beforepara agregar un pattern, me topo con el problema de que no funciona la propiedad fixed; Sin embargo al agregarlo en otro section funciona sin problemas, la pregunta es:

¿Por qué en el :before no funciona?

TOPNAV Dentro de Elemento con :Before

html, body{
    height: 100%;
    margin:0;
}
section{
    height: 100%;
    width: 100%;
    position: relative;
}
#section1{
  background-image: url("https://images.wallpaperscraft.com/image/australia_sydney_agua_ciudad_cielo_58777_1920x1080.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  filter: contrast(90%);
}
#section1:before{
  content: "";
  position: absolute;
  width: 100%;
  height:100%;
  opacity:0.5;
  background-color: #303030;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 4 4'%3E%3Cpath fill='%230d0d0d' fill-opacity='0.7' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
}
#section1 div{
  position: relative;
  z-index: 10;
  
}

#section2{
  background:blue;
}
#section3{
  background: yellow;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=se, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
    <link rel="stylesheet" href="style/estilo.css">
    <title>Document</title>
</head>
<body>
   <section id="section1">
      <nav class="navbar navbar-light bg-light fixed-top">
          <a class="navbar-brand" href="#">Fixed top</a>
        </nav>
   </section>
   <section id="section2"></section>
   <section id="section3"></section>

    <script src="scripts/jquery/jquery-3.4.0.js"></script>
    <script src="scripts/bootstrap/bootstrap.bundle.js"></script>
    <script src="scripts/bootstrap/bootstrap.js"></script>
    <script></script>
</body>
</html>

TOPNAV En otro Section

html, body{
    height: 100%;
    margin:0;
}
section{
    height: 100%;
    width: 100%;
    position: relative;
}
#section1{
  background-image: url("https://images.wallpaperscraft.com/image/australia_sydney_agua_ciudad_cielo_58777_1920x1080.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  filter: contrast(90%);
}
#section1:before{
  content: "";
  position: absolute;
  width: 100%;
  height:100%;
  opacity:0.5;
  background-color: #303030;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 4 4'%3E%3Cpath fill='%230d0d0d' fill-opacity='0.7' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
}
#section1 div{
  position: relative;
  z-index: 10;
  
}


#section2{
  background:blue;
}
#section3{
  background: yellow;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=se, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
    <link rel="stylesheet" href="style/estilo.css">
    <title>Document</title>
</head>
<body>
   <section id="section1">
      
   </section>
   <section id="section2">
    <nav class="navbar navbar-light bg-light fixed-top">
          <a class="navbar-brand" href="#">Fixed top</a>
        </nav>
   </section>
   <section id="section3"></section>

    <script src="scripts/jquery/jquery-3.4.0.js"></script>
    <script src="scripts/bootstrap/bootstrap.bundle.js"></script>
    <script src="scripts/bootstrap/bootstrap.js"></script>
    <script></script>
</body>
</html>

2
  • en que sentido adentro de una section que tiene foto ? la foto le haria de background al nav ? y queres que se quede siempre a 100px de arriba o queres que se pegue arriba ?
    – Federico
    Commented el 20 abr. 2019 a las 20:18
  • @Federico La idea es hacer cambios al usar el scroll, el nav inicia transparente para que la imagen del fondo del section pueda lucir, al moverlo pondré un background, pero el problema es que el fixed no funciona cuando esta el nav dentro del section Commented el 20 abr. 2019 a las 20:49

1 respuesta 1

0

A ver, vamos por partes...

  1. Si es una navegación fija en la cabecera entiendo que no debe ir asociada a un único <section> por lo que meterlo dentro de uno no parece tener mucho sentido
  2. No veo razón por la que necesites un before para hacer lo que pretendes.
  3. No has testado bien los casos porque no parece que el issue esté asociado al pseudoelemento :before, pues tanto si se lo agrego al que no lo tiene como si se lo quito desde la consola al que lo tiene, el resultado en ambos casos es el mismo.

Por lo tanto, mi recomendación es:

  1. Saca el <nav> fuera del <section>
  2. Combina múltiples backgrounds con background-blend-modepara conseguir el efecto de superposición de imagen sobre el "pattern" (patrón en castellano).

De esta forma no sólo podrás superponer una imagen trasparente sino que además podrás jugar con técnicas avanzadas de fusión de color.

Además evitarás usar :pseudoelementos que modifican el DOM al vuelo y a veces dan problemas de rendimiento.

html, body{
    height: 100%;
    margin:0;
}
section{
    height: 100%;
    width: 100%;
    position: relative;
}
#section1, #section2, #section3{
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 4 4'%3E%3Cpath fill='%230d0d0d' fill-opacity='0.7' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E"), url("https://images.wallpaperscraft.com/image/night_city_aerial_view_buildings_197850_1280x720.jpg");
  background-color: #909090;
  background-blend-mode: normal, multiply;
  background-position: center;
  background-repeat: repeat, no-repeat;
  background-size: 8px 8px, cover;
  /*filter: contrast(90%);*/
}


#section2{
  background-color: red;
}
#section3{
  background-color: yellow;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=se, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
    <link rel="stylesheet" href="style/estilo.css">
    <title>Document</title>
</head>
<body>
  <nav class="navbar navbar-light bg-light fixed-top">
    <a class="navbar-brand" href="#">Fixed top</a>
  </nav>
  <section id="section1">


  </section>
  <section id="section2">
  </section>
  <section id="section3"></section>
  <script src="scripts/jquery/jquery-3.4.0.js"></script>
  <script src="scripts/bootstrap/bootstrap.bundle.js"></script>
  <script src="scripts/bootstrap/bootstrap.js"></script>
</html>

Tu Respuesta

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

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