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><a href="index.php" style="background-color: white; color:black ;font-size:25px;">PROIZVODI</a></li> <li><a href="o_nama.php">O NAMA</a></li> <li><a href="kontakt.php">KONTAKT</a></li> </ul> </div> <div class="nav_right"></div> </nav> </div>
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><a href="index.php" style="background-color: white; color:black ;font-size:25px;">PROIZVODI</a></li> <li><a href="o_nama.php">O NAMA</a></li> <li><a href="kontakt.php">KONTAKT</a></li> </ul> </div> <div class="nav_right"></div> </nav> </div>
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><a href="index.php" style="background-color: white; color:black ;font-size:25px;">PROIZVODI</a></li> <li><a href="o_nama.php">O NAMA</a></li> <li><a href="kontakt.php">KONTAKT</a></li> </ul> </div> <div class="nav_right"></div> </nav> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.