CODEWITHSUNDEEP
htmlcss
Alex
Alex

Reputation: 507

Navigation bar shrinks when position is set to fixed

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>

this is how it should look like without .top{position:fixed}

this is how it looks like when i put .top{position:fixed} with .top{position:fixed}

Upvotes: 3

Views: 5128

Answers (2)

lumio
lumio

Reputation: 7585

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>

Upvotes: 2

Stickers
Stickers

Reputation: 78796

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>

Upvotes: 5

Related Questions