Llevo tiempo intentando resolver porqué la propiedad sticky para la navbar no me funciona y no he podido lograr nada. Cuando comencé a hacer el código si funcionaba, pero ahora que he añadido más código no me funciona. Espero puedan ayudarme, soy principiante en html5 y css3.
Éste es el código del archivo HTML. La parte del body la divido en tres columnas, las dos de los lados son de igual tamaño, y la columna central es la más grande.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="Aqui va la descripcion del sitio">
<meta name="keywords" content="circuits, electrical circuits, electricity">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<title>Electrical Circuits</title>
<link rel="icon" href="img\icon.png">
</head>
<body>
<header>
<h1>Electrical Circuits</h1>
</header>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#what">What is a Circuit?</a></li>
<li><a href="#types">Types of Electrical Circuits</a></li>
<li><a href="#">Electronic VS Electric Circuit</a></li>
<li><a href="#">Electrical Circuit Analysis</a></li>
</ul>
<div class="row">
<div class="column side">
<div class="card">
<h2>Side</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit..</p>
</div>
</div>
<div class="column middle">
<div class="card" id="what">
<img class="image1" src="img/image.jpg">
<h2>What is a Circuit?</h2>
<p>Our daily life is surrounded by electrical circuits, these are present in homes, businesses and even in cell phones. <br><br>First, let's define the word circuit. A circuit is defined as a complete and closed path around which an electric current can circulate. It can also mean a system of electrical conductors and components that form such a path. Every time you flip a switch (in operation), you are completing a circuit and letting the electrical currents do their thing.</p>
</div>
</div>
</div>
<div class="column side">
<div class="card">
<h2>Side</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit..</p>
</div>
</div>
</div>
</body>
</html>
Éste es el código de mi archivo CSS. No se si habrá afectado de alguna manera el que tenga tres columnas en el body, o el estilo que le di a las imágenes.
* {
box-sizing: border-box;
}
body{
background: #D0D3D4;
font-family: Arial;
padding: 10px;
}
header{
padding: 30px;
background-color: #00003D;
text-align: left;
text-indent: 100px;
font-family: Arial;
}
h1{
color: white;
font-size: 50px;
font-weight: bold;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #1F618D;
position: sticky;
top: 0;
}
li {
float: left;
border-right: 1px solid #bbb;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #154360;
font-size: 15px;
}
.active {
background-color: #4CAF50;
}
.column {
float: left;
text-align:justify;
}
/* Left and right column */
.column.side {
width: 19%;
}
/* Middle column */
.column.middle {
width: 60%;
margin-left: 13px;
margin-right: 13px;
}
/* Add a card effect for articles */
.card {
background-color: white;
padding: 20px;
border-radius: 10px;
margin-top: 15px;
}
.image1{
float: left;
margin-top: 20px;
margin-right: 10px;
width: 20%;
/*height: 200px;*/
}
.image2{
float: right;
margin-top: 50px;
margin-left: 10px;
border-radius: 10px;
width: 50%;
}
.icon{
float: left;
width: 100px;
height: 100px;
}
/* Footer */
.footer {
padding: 20px;
text-align: center;
background: #ddd;
margin-top: 20px;
}
/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
.leftcolumn, .rightcolumn {
width: 100%;
padding: 0;
}
}
/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
.topnav a {
float: none;
width: 100%;
}
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column.side, .column.middle {
width: 100%;
}
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.container {
position: relative;
float: left;
padding: 10px;
width: 33.33%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #00003D;
overflow: hidden;
width: 0;
height: 100%;
transition: .5s ease;
}
.container:hover .overlay {
width: 100%;
}
.text {
white-space: nowrap;
color: white;
font-size: 25px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}```