CODEWITHSUNDEEP
csshtmlmobile
Eric ERK
Eric ERK

Reputation: 369

Navbar getting in the way of Image

My navbar seems to get in the way of my logo when on mobile, it just climbs over it. how would I get it to not interfere with the image? It just kind of envelops it.

.drp {
  position: fixed;
  bottom: 0%;
  width: 100%
}
.lg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 500px;
  height: 500px;
  margin-top: -250px;
  margin-left: -250px;
}
<div class="lg">
  <img src="12.png" width="100%" />
</div>
</div>
<body>
<div class="drp">
  <nav>
    <ul>
      <a href="#">
        <li>link</li>
      </a>
      <a href="#">
        <li>link</li>
      </a>
      <a href="#">
        <li>link</li>
      </a>
      <a href="#">
        <li>link</li>
      </a>
    </ul>
  </nav>
 </body>
</div>

Upvotes: 2

Views: 46

Answers (1)

m4n0
m4n0

Reputation: 32355

The problem is caused by the position: absolute and position: fixed on lg and drp classes which makes them out of the normal flow of document.

I have a CSS hack for your current code. Your code works fine until the browser width is reduced to 600px. So try to modify your CSS within a media query, give both the classes position: relative and adjust the position of lg accordingly.

@media (max-width: 600px) {
  .lg {
    left: 0;
    margin: 0;
    position: relative;
    top: 20%;
    margin-top: 30px; /* top seems to not work sometimes when resizing, fiddle with the margin values */
  }

  .drp {
    position: relative;
  }
}

Screenshot after modifying:

enter image description here

Upvotes: 1

Related Questions