Quiero que mi barra de navegación se quede fija en mi archivo web. He probado el position: sticky; top: 0; Pero no funciona, cuando la barra de navegación alcanza el valor top: 0, no se adhiere a la parte superior de la página. El parent no tiene una altura definida, y creo que ese es el problema, pero no sé qué altura le tengo que poner porque el padre es el contenido de la pagina y además no hay ancestors con overflow oculto. Espero que alguien pueda ayudarme.
:root {
--primary-color: #FF7F11;
--secondary-color: #FCD757;
--default-text: #f5f5f5;
}
html{
overflow-x: hidden;
touch-action: none;
-ms-touch-action: none;
}
body {
box-sizing: border-box;
margin: 0;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
touch-action: none;
-ms-touch-action: none;
box-sizing: border-box;
}
header{
z-index: 999;
position: absolute;
padding: 15px 0;
width: 100%;
}
h1,p,a,h2,h3,h4 {
font-family: 'Sawarabi Mincho', serif;
}
.menu{
font-family: 'Sawarabi Mincho', serif;
}
.vl {
border-left: 1px solid var(--primary-color);
height: 30px;
}
.header__content-area {
display: flex;
justify-content: space-between;
align-items: center;
margin: 0 120px;
z-index: 999;
transition: all 0.3s;
}
.header__img-container{
display: flex;
justify-content: center;
width: 114px;
}
.main-logo {
height: 80px;
}
.menu__li {
display: inline-block;
margin: 0 25px;
font-family: 'Sawarabi Mincho', serif;
font-size: 18px;
position: relative;
}
.menu__li::after {
content: '';
position: absolute;
left: 50%;
bottom: 0;
height: 2px;
width: 0%;
background-color: var(--primary-color);
transition: all 0.3s;
}
.menu__li:hover::after {
width: 100%;
left: 0;
}
.nav__list {
padding: 0;
}
.menu__li>a{
color: var(--default-text);
text-decoration: none;
display: block;
padding: 10px;
height: 100%;
transition: all 0.2s;
}
.menu__li>a:hover {
color: var(--primary-color);
}
.header__social-nav {
display: flex;
align-items: center;
}
.header__social-nav>div {
margin: 8px;
height: 22px;
}
.header__social-nav>div>a {
text-decoration: none;
color: var(--default-text);
}
.media-icon, .mobile-media-icon {
font-size: 22px;
transition: all 0.2s;
}
.media-icon:hover{
color: var(--primary-color);
scale: 1.1;
}
.carta-section{
position: relative;
height:50vh;
}
.carta-opacity{
position: absolute;
width: 100%;
height:50vh;
background-color: #0008;
}
.carta-img{
object-fit: cover;
width: 100%;
height: 50vh;
}
.carta-title{
position: absolute;
width: 100%;
top: 50%;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
text-align: center;
width: 350px;
color: #fff;
font-family: 'Roboto Slab', serif;
font-size: 40px;
transition: all 0.3s;
}
/* STICKY NAV BAR ---------------------------------------------------------------------------------------------------------------*/
.sticky-container{
position: sticky;
top: 0;
}
.carta-nav-bar{
border-top: 3px solid black; border-bottom: 3px solid black;
}
.carta-items-container{
height: 75px;
display: flex;
align-items: center;
margin: 0 120px;
justify-content: space-between;
}
.carta-item{
padding: 20px 40px;
background: var(--primary-color);
border-radius: 10px;
color: #fff;
font-family: 'Roboto Slab';
cursor: pointer;
transition: all 0.3s;
}
.carta-item:hover{
margin-bottom: 10px;
}
.carta-item:focus{
margin-bottom: 10px;
background: var(--secondary-color);
}
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.some-content{
height: 3000px;
background-color: var(--primary-color);
}
<!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, initial-scale=1.0">
<link rel="stylesheet" href="sticky.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300;400;900&family=Sawarabi+Mincho&display=swap" rel="stylesheet">
<title>Document</title>
</head>
<body>
<header>
<div class="header__content-area">
<div class="header__img-container"><img src="https://images.squarespace-cdn.com/content/v1/5c25361496e76fbea2848f55/1553282628515-4T7SHD0BOHGWX7YVNQEM/JP_3_IN_logo.png" alt="" class="main-logo"></div>
<nav class="header__nav">
<ul class="nav__list">
<li class="menu__li"><a href="index.html">INICIO</a></li>
<li class="menu__li"><a href="carta.html">CARTA</a></li>
<li class="menu__li"><a href="">MENÚS</a></li>
<li class="menu__li"><a href="">CONTACTO</a></li>
</ul>
</nav>
<nav class="header__social-nav">
<div><a href=""><svg class="media-icon" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">
<path fill="currentColor" d="M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2m-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4H7.6m9.65 1.5a1.25 1.25 0 0 1 1.25 1.25A1.25 1.25 0 0 1 17.25 8A1.25 1.25 0 0 1 16 6.75a1.25 1.25 0 0 1 1.25-1.25M12 7a5 5 0 0 1 5 5a5 5 0 0 1-5 5a5 5 0 0 1-5-5a5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3a3 3 0 0 0 3 3a3 3 0 0 0 3-3a3 3 0 0 0-3-3Z"/></svg></a>
</div>
<div><a href=""><svg class="media-icon" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">
<path fill="currentColor" d="M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.84 3.44 8.87 8 9.8V15H8v-3h2V9.5C10 7.57 11.57 6 13.5 6H16v3h-2c-.55 0-1 .45-1 1v2h3v3h-3v6.95c5.05-.5 9-4.76 9-9.95z"/></svg></a>
</div>
<div><a href=""><svg class="media-icon" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">
<path fill="currentColor" d="M12.006 4.295c-2.67 0-5.338.784-7.645 2.353H0l1.963 2.135a5.997 5.997 0 0 0 4.04 10.43a5.976 5.976 0 0 0 4.075-1.6L12 19.705l1.922-2.09a5.972 5.972 0 0 0 4.072 1.598a6 6 0 0 0 6-5.998a5.982 5.982 0 0 0-1.957-4.432L24 6.648h-4.35a13.573 13.573 0 0 0-7.644-2.353zM12 6.255c1.531 0 3.063.303 4.504.903C13.943 8.138 12 10.43 12 13.1c0-2.671-1.942-4.962-4.504-5.942A11.72 11.72 0 0 1 12 6.256zM6.002 9.157a4.059 4.059 0 1 1 0 8.118a4.059 4.059 0 0 1 0-8.118zm11.992.002a4.057 4.057 0 1 1 .003 8.115a4.057 4.057 0 0 1-.003-8.115zm-11.992 1.93a2.128 2.128 0 0 0 0 4.256a2.128 2.128 0 0 0 0-4.256zm11.992 0a2.128 2.128 0 0 0 0 4.256a2.128 2.128 0 0 0 0-4.256z"/></svg></a>
</div>
</nav>
</div>
</header>
<div class="carta-content">
<div class="carta-section">
<div class="carta-opacity"></div>
<div class="carta-img-container"><img class="carta-img" src="https://images.pexels.com/photos/313700/pexels-photo-313700.jpeg?auto=compress&cs=tinysrgb&w=1600" alt=""></div>
<div><h1 class="carta-title">NUESTRA CARTA</h1></div>
</div>
<!--STICKY NAV BAR ------------------------------------------------------------------------------------------------>
<div class="sticky-container">
<div class="carta-nav-bar">
<div class="carta-items-container">
<div tabindex="0" class="carta-item">
RACIONES
</div>
<div class="carta-item">
ENSALADAS
</div>
<div class="carta-item">
CARNES
</div>
<div class="carta-item">
PESCADOS
</div>
<div class="carta-item">
ARROCES
</div>
<div class="carta-item">
VINOS
</div>
<div class="carta-item">
POSTRES
</div>
</div>
</div>
</div>
<div class="some-content">
SOME CONTENT
</div>
</div>
</body>
</html>
La barra de navegación es la que tiene cuadros naranjas, fondo blanco y borde superior e inferior. Alterna la opción de pantalla completa, no es responsive (todavía)