My Sticky Nav isn't working/ partially working - html

Question

I'd like to make a sticky navbar like the one in this link: https://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_sticky
However, when I add the position: sticky; property to the element in my code it works and the navbar sticks after scrolling but when I scroll further down it goes away.
I would like it so that the navbar is sticky just like the one in the example.
body {
margin: 0;
box-sizing: content-box;
font-family: 'Lato', sans-serif;
}
.contenedor {
width: 100%;
margin: auto;
overflow: hidden;
}
.menu-navegacion {
padding: 0;
display: flex;
height: 100px;
justify-content: space-between;
align-items: center;
background-color: rgb(75, 75, 75);
position: sticky;
top: 0;
z-index: 30;
}
.logo {
padding-right: 10%;
padding-left: 10%;
height: 50px;
width: 20%;
display: flex;
justify-content: center;
margin-left: 1%;
position: relative;
}
.contenedor-triangulo {
height: 100%;
position: absolute;
}
.triangulo {
height: 0%;
width: 0%;
border-right: 30px solid transparent;
border-left: 30px solid transparent;
border-bottom: 50px solid red;
display: block;
}
.menu-lista {
margin-right: 20%;
}
.menu-lista ul li {
list-style: none;
display: inline-block;
}
.menu-lista ul li a {
text-decoration: none;
color: white;
padding-left: 20px;
}
.menu-header {
height: 600px;
background-color: cornflowerblue;
}
#slider {
margin: 0 auto;
width: 80%;
max-width: 100%;
text-align: center;
}
#slider input[type=radio] {
display: none;
}
#slider label {
cursor: pointer;
text-decoration: none;
}
#slides {
padding: 10px;
border: 3px solid #ccc;
background: #fff;
position: relative;
z-index: 1;
}
#overflow {
width: 100%;
overflow: hidden;
}
#slide1:checked~#slides .inner {
margin-left: 0;
}
#slide2:checked~#slides .inner {
margin-left: -100%;
}
#slide3:checked~#slides .inner {
margin-left: -200%;
}
#slide4:checked~#slides .inner {
margin-left: -300%;
}
#slides .inner {
transition: margin-left 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
width: 400%;
line-height: 0;
height: 550px;
}
#slides .slide {
width: 25%;
float: left;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
color: #fff;
}
#slides .slide_1 {
background: #00171F;
}
#slides .slide_2 {
background: #003459;
}
#slides .slide_3 {
background: #007EA7;
}
#slides .slide_4 {
background: #00A8E8;
}
#controls {
margin: -180px 0 0 0;
width: 100%;
height: 50px;
z-index: 3;
position: relative;
}
#controls label {
transition: opacity 0.2s ease-out;
display: none;
width: 50px;
height: 50px;
opacity: .4;
}
#controls label:hover {
opacity: 1;
}
#slide1:checked~#controls label:nth-child(2),
#slide2:checked~#controls label:nth-child(3),
#slide3:checked~#controls label:nth-child(4),
#slide4:checked~#controls label:nth-child(1) {
background: url(https://image.flaticon.com/icons/svg/130/130884.svg) no-repeat;
float: right;
margin: 0 -50px 0 0;
display: block;
}
#slide1:checked~#controls label:nth-child(4),
#slide2:checked~#controls label:nth-child(1),
#slide3:checked~#controls label:nth-child(2),
#slide4:checked~#controls label:nth-child(3) {
background: url(https://image.flaticon.com/icons/svg/130/130882.svg) no-repeat;
float: left;
margin: 0 0 0 -50px;
display: block;
}
#bullets {
margin: 150px 0 0;
text-align: center;
}
#bullets label {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 100%;
background: #ccc;
margin: 0 10px;
}
#slide1:checked~#bullets label:nth-child(1),
#slide2:checked~#bullets label:nth-child(2),
#slide3:checked~#bullets label:nth-child(3),
#slide4:checked~#bullets label:nth-child(4) {
background: #444;
}
#media screen and (max-width: 900px) {
#slide1:checked~#controls label:nth-child(2),
#slide2:checked~#controls label:nth-child(3),
#slide3:checked~#controls label:nth-child(4),
#slide4:checked~#controls label:nth-child(1),
#slide1:checked~#controls label:nth-child(4),
#slide2:checked~#controls label:nth-child(1),
#slide3:checked~#controls label:nth-child(2),
#slide4:checked~#controls label:nth-child(3) {
margin: 0;
}
#slides {
max-width: calc(100% - 140px);
margin: 0 auto;
}
}
#quienessomos {
margin: 0;
width: 100%;
height: 800px;
/*
background: palegoldenrod;*/
background: rgba(211, 211, 211, 0.199);
}
#grid1 {
margin: 0;
display: grid;
grid-template-columns: 10% 40% 0% 40% 10%;
grid-template-rows: 20% 20% 20% 20% 20%;
column-gap: 50px;
/*
border: 1px solid black;*/
width: 100%;
height: 100%;
}
#imagen1 {
background-image: url(../images/main1.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
grid-area: 2 / 2 / 5 / 3;
}
#texto1 {
position: relative;
width: 100%;
height: 100%;
/*
background: olive;*/
grid-area: 2 / 3 / 5 / 5;
}
#contenedortexto1 {
position: absolute;
display: inline-block;
width: 50%;
height: 100%;
/*
background: red;*/
}
#contenedortexto1 h2 {
color: rgb(7, 83, 184);
font-weight: 900;
font-size: 2em;
}
#superior {
font-size: 1.4em;
line-height: 1.5em;
font-weight: 400;
}
#inferior {
font-family: 'Ubuntu', sans-serif;
font-size: 1.4em;
line-height: 1.3em;
font-weight: 300;
}
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght#300;400;700;900&family=Ubuntu:wght#300&display=swap" rel="stylesheet">
<body>
<header>
<nav class="menu-navegacion contenedor">
<div class="logo">
<div class="contenedor-triangulo">
<div class="triangulo"></div>
</div>
</div>
<div class="menu-lista">
<ul>
<li><a href=#>INICIO</a></li>
<li><a href=#>PRODUCTOS</a></li>
<li><a href=#>EMPRESA</a></li>
<li><a href=#>CONTACTO</a></li>
</ul>
</div>
</nav>
<div id="slider">
<input type="radio" name="slider" id="slide1" checked>
<input type="radio" name="slider" id="slide2">
<input type="radio" name="slider" id="slide3">
<input type="radio" name="slider" id="slide4">
<div id="slides">
<div id="overflow">
<div class="inner">
<div class="slide slide_1">
<div class="slide-content">
<h2>Slide 1</h2>
<p>Content for slide 1</p>
</div>
</div>
<div class="slide slide_2">
<div class="slide-content">
<h2>Slide 2</h2>
<p>Content for slide 2</p>
</div>
</div>
<div class="slide slide_3">
<div class="slide-content">
<h2>Slide 3</h2>
<p>Content for slide 3</p>
</div>
</div>
<div class="slide slide_4">
<div class="slide-content">
<h2>Slide 4</h2>
<p>Content for slide 4</p>
</div>
</div>
</div>
</div>
</div>
<div id="controls">
<label for="slide1"></label>
<label for="slide2"></label>
<label for="slide3"></label>
<label for="slide4"></label>
</div>
<div id="bullets">
<label for="slide1"></label>
<label for="slide2"></label>
<label for="slide3"></label>
<label for="slide4"></label>
</div>
</div>
</header>
<section id="main">
<div class="contenedor" id="quienessomos">
<div id="grid1">
<div id="imagen1"></div>
<div id="texto1">
<div id="contenedortexto1">
<h2>QUIMICA TRV</h2>
<p id="superior">Brindamos servicios sobre comercialización de productos químicos para mantenimiento y producción, seguridad e higiene industrial.</p>
<p id="inferior">Somos una empresa en expansión con amplia experiencia en la atención de clientes de todo tipo de industrias. Entre ellas metalúrgica, alimenticia, del transporte y rectificadoras. Además tratamientos de agua para calderas y torres de enfriamiento,
automotriz, empresas de servicios, etc.</p>
</div>
</div>
</div>
</div>
</section>
<section id="main">
<div class="contenedor" id="quienessomos">
<div id="grid1">
<div id="imagen1"></div>
<div id="texto1">
<div id="contenedortexto1">
<h2>QUIMICA TRV</h2>
<p id="superior">Brindamos servicios sobre comercialización de productos químicos para mantenimiento y producción, seguridad e higiene industrial.</p>
<p id="inferior">Somos una empresa en expansión con amplia experiencia en la atención de clientes de todo tipo de industrias. Entre ellas metalúrgica, alimenticia, del transporte y rectificadoras. Además tratamientos de agua para calderas y torres de enfriamiento,
automotriz, empresas de servicios, etc.</p>
</div>
</div>
</div>
</div>
</section>
</body>

Answer 1

Your nav is correctly acting "sticky", which means it sticks to the top of the parent element.
You can either:
Move your nav element up outside the <header>, to just below <body>; or
Make your <header> sticky as well
Your choice will depend on your ui requirements and use of screen real estate in different viewport heights.

Answer 2

I think I may have found your issue, your navbar is inside the <header></header> tag, which is why its disappearing after you scroll past the page header.
Try removing the header tags and see if it stays on the page.

Answer 3

To have you code running like the example shown in the link, i had to move the slider outside the header element. Then I had to code the header element with a fixed position and 0px on top.
I just tested and it is working as you want. :)
body {
margin: 0;
box-sizing: content-box;
font-family: 'Lato', sans-serif;
}
/* Removed slider from the Header element. Header is a fixed and independent block now*/
header {
position:fixed;
top:0;
z-index:10;
width: 100%;
display:block;
}
.contenedor {
width: 100%;
margin: auto;
overflow: hidden;
}
.menu-navegacion {
padding: 0;
display: flex;
height: 100px;
justify-content: space-between;
align-items: center;
background-color: rgb(75, 75, 75);
position: sticky;
top: 0;
z-index: 30;
}
.logo {
padding-right: 10%;
padding-left: 10%;
height: 50px;
width: 20%;
display: flex;
justify-content: center;
margin-left: 1%;
position: relative;
}
.contenedor-triangulo {
height: 100%;
position: absolute;
}
.triangulo {
height: 0%;
width: 0%;
border-right: 30px solid transparent;
border-left: 30px solid transparent;
border-bottom: 50px solid red;
display: block;
}
.menu-lista {
margin-right: 20%;
}
.menu-lista ul li {
list-style: none;
display: inline-block;
}
.menu-lista ul li a {
text-decoration: none;
color: white;
padding-left: 20px;
}
.menu-header {
height: 600px;
background-color: cornflowerblue;
}
/* Added margin top equal to header height, in this case 100px */
#slider {
margin: 100px auto 0 auto;
width: 80%;
max-width: 100%;
text-align: center;
}
#slider input[type=radio] {
display: none;
}
#slider label {
cursor: pointer;
text-decoration: none;
}
#slides {
padding: 10px;
border: 3px solid #ccc;
background: #fff;
position: relative;
z-index: 1;
}
#overflow {
width: 100%;
overflow: hidden;
}
#slide1:checked~#slides .inner {
margin-left: 0;
}
#slide2:checked~#slides .inner {
margin-left: -100%;
}
#slide3:checked~#slides .inner {
margin-left: -200%;
}
#slide4:checked~#slides .inner {
margin-left: -300%;
}
#slides .inner {
transition: margin-left 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
width: 400%;
line-height: 0;
height: 550px;
}
#slides .slide {
width: 25%;
float: left;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
color: #fff;
}
#slides .slide_1 {
background: #00171F;
}
#slides .slide_2 {
background: #003459;
}
#slides .slide_3 {
background: #007EA7;
}
#slides .slide_4 {
background: #00A8E8;
}
#controls {
margin: -180px 0 0 0;
width: 100%;
height: 50px;
z-index: 3;
position: relative;
}
#controls label {
transition: opacity 0.2s ease-out;
display: none;
width: 50px;
height: 50px;
opacity: .4;
}
#controls label:hover {
opacity: 1;
}
#slide1:checked~#controls label:nth-child(2),
#slide2:checked~#controls label:nth-child(3),
#slide3:checked~#controls label:nth-child(4),
#slide4:checked~#controls label:nth-child(1) {
background: url(https://image.flaticon.com/icons/svg/130/130884.svg) no-repeat;
float: right;
margin: 0 -50px 0 0;
display: block;
}
#slide1:checked~#controls label:nth-child(4),
#slide2:checked~#controls label:nth-child(1),
#slide3:checked~#controls label:nth-child(2),
#slide4:checked~#controls label:nth-child(3) {
background: url(https://image.flaticon.com/icons/svg/130/130882.svg) no-repeat;
float: left;
margin: 0 0 0 -50px;
display: block;
}
#bullets {
margin: 150px 0 0;
text-align: center;
}
#bullets label {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 100%;
background: #ccc;
margin: 0 10px;
}
#slide1:checked~#bullets label:nth-child(1),
#slide2:checked~#bullets label:nth-child(2),
#slide3:checked~#bullets label:nth-child(3),
#slide4:checked~#bullets label:nth-child(4) {
background: #444;
}
#media screen and (max-width: 900px) {
#slide1:checked~#controls label:nth-child(2),
#slide2:checked~#controls label:nth-child(3),
#slide3:checked~#controls label:nth-child(4),
#slide4:checked~#controls label:nth-child(1),
#slide1:checked~#controls label:nth-child(4),
#slide2:checked~#controls label:nth-child(1),
#slide3:checked~#controls label:nth-child(2),
#slide4:checked~#controls label:nth-child(3) {
margin: 0;
}
#slides {
max-width: calc(100% - 140px);
margin: 0 auto;
}
}
#quienessomos {
margin: 0;
width: 100%;
height: 800px;
/*
background: palegoldenrod;*/
background: rgba(211, 211, 211, 0.199);
}
#grid1 {
margin: 0;
display: grid;
grid-template-columns: 10% 40% 0% 40% 10%;
grid-template-rows: 20% 20% 20% 20% 20%;
column-gap: 50px;
/*
border: 1px solid black;*/
width: 100%;
height: 100%;
}
#imagen1 {
background-image: url(../images/main1.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
grid-area: 2 / 2 / 5 / 3;
}
#texto1 {
position: relative;
width: 100%;
height: 100%;
/*
background: olive;*/
grid-area: 2 / 3 / 5 / 5;
}
#contenedortexto1 {
position: absolute;
display: inline-block;
width: 50%;
height: 100%;
/*
background: red;*/
}
#contenedortexto1 h2 {
color: rgb(7, 83, 184);
font-weight: 900;
font-size: 2em;
}
#superior {
font-size: 1.4em;
line-height: 1.5em;
font-weight: 400;
}
#inferior {
font-family: 'Ubuntu', sans-serif;
font-size: 1.4em;
line-height: 1.3em;
font-weight: 300;
}
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght#300;400;700;900&family=Ubuntu:wght#300&display=swap" rel="stylesheet">
<body>
<header>
<nav class="menu-navegacion contenedor">
<div class="logo">
<div class="contenedor-triangulo">
<div class="triangulo"></div>
</div>
</div>
<div class="menu-lista">
<ul>
<li><a href=#>INICIO</a></li>
<li><a href=#>PRODUCTOS</a></li>
<li><a href=#>EMPRESA</a></li>
<li><a href=#>CONTACTO</a></li>
</ul>
</div>
</nav>
</header>
<!-- Slider Is outside the header element -->
<div id="slider">
<input type="radio" name="slider" id="slide1" checked>
<input type="radio" name="slider" id="slide2">
<input type="radio" name="slider" id="slide3">
<input type="radio" name="slider" id="slide4">
<div id="slides">
<div id="overflow">
<div class="inner">
<div class="slide slide_1">
<div class="slide-content">
<h2>Slide 1</h2>
<p>Content for slide 1</p>
</div>
</div>
<div class="slide slide_2">
<div class="slide-content">
<h2>Slide 2</h2>
<p>Content for slide 2</p>
</div>
</div>
<div class="slide slide_3">
<div class="slide-content">
<h2>Slide 3</h2>
<p>Content for slide 3</p>
</div>
</div>
<div class="slide slide_4">
<div class="slide-content">
<h2>Slide 4</h2>
<p>Content for slide 4</p>
</div>
</div>
</div>
</div>
</div>
<div id="controls">
<label for="slide1"></label>
<label for="slide2"></label>
<label for="slide3"></label>
<label for="slide4"></label>
</div>
<div id="bullets">
<label for="slide1"></label>
<label for="slide2"></label>
<label for="slide3"></label>
<label for="slide4"></label>
</div>
</div>
<section id="main">
<div class="contenedor" id="quienessomos">
<div id="grid1">
<div id="imagen1"></div>
<div id="texto1">
<div id="contenedortexto1">
<h2>QUIMICA TRV</h2>
<p id="superior">Brindamos servicios sobre comercialización de productos químicos para mantenimiento y producción, seguridad e higiene industrial.</p>
<p id="inferior">Somos una empresa en expansión con amplia experiencia en la atención de clientes de todo tipo de industrias. Entre ellas metalúrgica, alimenticia, del transporte y rectificadoras. Además tratamientos de agua para calderas y torres de enfriamiento,
automotriz, empresas de servicios, etc.</p>
</div>
</div>
</div>
</div>
</section>
<section id="main">
<div class="contenedor" id="quienessomos">
<div id="grid1">
<div id="imagen1"></div>
<div id="texto1">
<div id="contenedortexto1">
<h2>QUIMICA TRV</h2>
<p id="superior">Brindamos servicios sobre comercialización de productos químicos para mantenimiento y producción, seguridad e higiene industrial.</p>
<p id="inferior">Somos una empresa en expansión con amplia experiencia en la atención de clientes de todo tipo de industrias. Entre ellas metalúrgica, alimenticia, del transporte y rectificadoras. Además tratamientos de agua para calderas y torres de enfriamiento,
automotriz, empresas de servicios, etc.</p>
</div>
</div>
</div>
</div>
</section>
</body>