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 :before
para 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>
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 ?section
pueda lucir, al moverlo pondré un background, pero el problema es que el fixed no funciona cuando esta el nav dentro del section