Navigation bar shrinks when position is set to fixed - html

Question

I am currently having an issue where my navigation bar and banner shrink when I set their position to fixed.I have many things like changing z-index,setting its top position to 0,adding auto margin etc, and none of it worked.I hope someone can point me to my mistake.This is my html code:
html,
body {
margin: 0;
background-color: #ffeecc;
font-family: 'Chivo', sans-serif;
}
.container {
margin: auto;
width: 75%;
}
.nav_left {
width: 100%;
background-color: #258e25;
height: 50px;
float: left;
text-align: left;
}
.banner {
width: 100%;
overflow: hidden;
background-color: white;
}
.banner img {
width: 70%;
height: 150px;
padding: 0 15%;
}
.top {
position: fixed;
}
nav {
text-align: center;
}
nav ul {
list-style-type: none;
padding: 0;
margin: 0;
display: inline-block;
width: 100%;
height: 100%;
}
nav ul li {
float: left;
text-align: center;
height: 100%;
width: 25%;
}
nav ul li a {
display: inline-block;
width: 100%;
font-weight: bold;
line-height: 50px;
text-decoration: none;
color: white;
}
nav ul li a:hover {
background-color: white;
color: black;
}
<div class="container">
<div class="top">
<div class="banner">
<img src="images/winwin-logo-cover.jpg" alt="winwin logo">
</div>
<nav>
<div class="nav_left">
<ul>
<li>PROIZVODI</li>
<li>O NAMA</li>
<li>KONTAKT</li>
</ul>
</div>
<div class="nav_right"></div>
</nav>
</div>
this is how it should look like
this is how it looks like when i put .top{position:fixed}

Answer 1

When you set an element to absolute or fixed position, it will be out of the the normal content flow and trigger the shrink to fit feature. You can apply the offsets and width/height to position and recreate the box size you wish to have.
.top {
position: fixed;
left: 0; /* ADDED */
top: 0; /* ADDED */
width: 100%; /* ADDED */
}
html,
body {
margin: 0;
background-color: #ffeecc;
font-family: 'Chivo', sans-serif;
}
.container {
margin: auto;
width: 75%;
}
.nav_left {
width: 100%;
background-color: #258e25;
height: 50px;
float: left;
text-align: left;
}
.banner {
width: 100%;
overflow: hidden;
background-color: white;
}
.banner img {
width: 70%;
height: 150px;
padding: 0 15%;
}
.top {
position: fixed;
left: 0;
top: 0;
width: 100%;
}
nav {
text-align: center;
}
nav ul {
list-style-type: none;
padding: 0;
margin: 0;
display: inline-block;
width: 100%;
height: 100%;
}
nav ul li {
float: left;
text-align: center;
height: 100%;
width: 25%;
}
nav ul li a {
display: inline-block;
width: 100%;
font-weight: bold;
line-height: 50px;
text-decoration: none;
color: white;
}
nav ul li a:hover {
background-color: white;
color: black;
}
<div class="container">
<div class="top">
<div class="banner">
<img src="images/winwin-logo-cover.jpg" alt="winwin logo">
</div>
<nav>
<div class="nav_left">
<ul>
<li>PROIZVODI</li>
<li>O NAMA</li>
<li>KONTAKT</li>
</ul>
</div>
<div class="nav_right"></div>
</nav>
</div>

Answer 2

Because .top has no width. However, when set to fixed it is using the viewport width to calculate the width. You might want to set it to 75%.
You also might want to set .container to position: relative so .top will relate to its borders.
body {
margin: 0;
background-color: #ffeecc;
font-family: 'Chivo', sans-serif;
}
.container {
margin: auto;
width: 75%;
position: relative;
}
.top {
position: fixed;
width: 75%;
}
.nav_left {
width: 100%;
background-color: #258e25;
height: 50px;
float: left;
text-align: left;
}
nav {
text-align: center;
}
nav ul {
list-style-type: none;
padding: 0;
margin: 0;
display: inline-block;
width: 100%;
height: 100%;
}
nav ul li {
float: left;
text-align: center;
height: 100%;
width: 25%;
}
nav ul li a {
display: inline-block;
width: 100%;
font-weight: bold;
line-height: 50px;
text-decoration: none;
color: white;
}
nav ul li a:hover {
background-color: white;
color: black;
}
<div class="container">
<div class="top">
<nav>
<div class="nav_left">
<ul>
<li>PROIZVODI</li>
<li>O NAMA</li>
<li>KONTAKT</li>
</ul>
</div>
<div class="nav_right"></div>
</nav>
</div>