Solution 1 :

Do not set static height to your header, then the inner content can expand the parent’s size. You could use min-height instead.

Problem :

I have a header than has 2 DIVs and 1 NAV inside it –

  <header>
    <!-- Header Images -->
    <div class="left-logo">
      <img src="images/aloha-logo.svg" />
    </div>
    <div class="right-logo">
      <img src="images/cart-icon.svg" />
      <span class="red-dot"></span>
      <span id="number">0</span>
    </div>
    <hr>
    <nav class="main-menu">
      <ul>
      <li id="nav-about"><a href="#jumpAbout">About</a></li>
      <li id="nav-shop"><a href="#jumpShop">Shop</a></li>
      <li id="nav-featured"><a href="#jumpFeatured">Featured</a></li>
      <li id="nav-updates"><a href="#jumpUpdates">Updates</a></li>
      </ul>
    </nav>
  </header>

I used Firefox while making this site and it looks fine in mobile view with. I uploaded it and looked on my phone, and it looks like the nav menu is showing outside of header.

This is the website – https://johnsaputo.net/aloha/

Screenshot from Safari on an iPhone – https://johnsaputo.net/aloha/phone-screenshot.jpeg . I checked on Firefox on the iPhone and it looks the same.

Looks fine in Chrome on Mac OS, but on Safari it has the same issue as it does on the phone.

This is the CSS I have for the header –

header {
  background-color: white;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  position: sticky;
  top: 0%;
  padding-top: 5px;
  height: 115px;
}

I tried to remove the “position: sticky”, and “top: 0%”, to see if that was throwing it off, but still had this problem.

This is the nav CSS –

.main-menu {
  display: flex;
  justify-content: center;
  width: 100%;
  padding-bottom: 20px;
}

.main-menu ul {
  display: flex;
  width: 100%;
  justify-content: space-around;
}

hr {
  display: block;
  margin-bottom: 10px;
  border-width: 1px;
  color: #e6e6e6;
  opacity: 50%;
  width: 100%;
}

And this is the CSS in the Hero section –

.hero-banner {
  color: white;
  width: 100%;
  height: 400px;
  background-image: linear-gradient(rgba(0, 0, 0, 0.33), rgba(0, 0, 0, 0.33)),
    url(../images/banner-girl.png), url(../images/flower-bkgd.jpg);
  background-position: left, center 50px, center;
  background-repeat: repeat, no-repeat, repeat;
  background-size: cover, contain, cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 50px;
}

Does anyone know why the is not showing inside the header section? Works fine in Chrome and Safari in mac OS, but not on Safari, and not on Safari or Firefix on iOS

By

Leave a Reply

Your email address will not be published. Required fields are marked *