CODEWITHSUNDEEP
htmlcssresponsive-design
Ján Andrejko
Ján Andrejko

Reputation: 5

Why H1 interfering to the navbar in mobile version?

I don't know why my H1 is interfering with navbar in mobile version. When I scroll down my navbar in mobile version, H1 interfering to the navbar and I can't fix this issue. How can I change my code, that it works ?

Image in mobile version is here: https://i.sstatic.net/SJ3vi.jpg

Code below:

.banner {
  background-image: url('../../../assets/images/natallia-nagorniak-tA3sJ4u09eU-unsplash.jpg');
  height: 800px;
  background-position: center center;
  background-size: 100%;
}

.content {
  top: 25%;
  left: 5%;
  position: absolute;
}

.content h1 {
  color: black;
  font-size: 3em;
  font-weight: bold;
}

.content a {
  text-decoration: none;
  background-color: var(--primary-color);
  color: #fff;
  padding: 15px 40px;
  border-radius: 5px;
}

.content a:hover {
  background-color: #64cff7;
  color: #fff;
}

.stepBox {
  background-color: #64cff7;
  padding: 20px 20px;
  border-radius: 5px;
  text-align: center;
}

.stepBox h1 {
  font-size: 30px;
  font-weight: bold;
  color: black;
}

.stepBox p {
  font-size: 20px;
  font-style: italic;
  color: #fff;
}

.highlight {
  color: var(--primary-color);
  font-weight: bold;
  font-style: italic;
  text-decoration: underline;
}

.cakebox {
  padding: 10px 5px;
}

.cakebox img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-radius: 5px;
}

.cakebox h1 {
  font-size: 18px;
  margin-top: 20px;
  font-weight: bold;
}

.viewmorebtn {
  text-decoration: none;
  background-color: #64cff7;
  color: #fff;
  padding: 10px 10px;
  border-radius: 5px;
  font-size: 18px;
}

.viewmorebtn i {
  padding-left: 5px;
}

@media screen and (max-width:600px) {
  .banner {
    height: 600px;
  }
}
<div class="banner">
  <div class="content">
    <h1 class="mb-5">Čerstvé koláče <br/> priamo k tvojim dverám</h1>
    <a routerLink="menu">Objednaj teraz! <i class="bi bi-arrow-right"></i></a>
  </div>
</div>
<!-- step -->
<div class="container mt-5 mb-5">
  <h1 class="text-center">Ako získať <span class="highlight">čerstvé koláče</span></h1>
  <div class="row mt-3">
    <!-- one -->
    <div class="col-lg-4 mt-2">
      <div class="stepBox">
        <h1>1</h1>
        <p>vyberte koláč</p>
      </div>
    </div>
    <!-- two -->
    <div class="col-lg-4 mt-2">
      <div class="stepBox">
        <h1>2</h1>
        <p>vyplnte podrobnosti</p>
      </div>
    </div>
    <!-- three -->
    <div class="col-lg-4 mt-2">
      <div class="stepBox">
        <h1>3</h1>
        <p>doručenie vašej objednávky</p>
      </div>
    </div>
  </div>
</div>

<!-- cakebox -->
<div class="container mt-4 mb-4">
  <h1 class="text-center">Obľúbené produkty</h1>
  <div class="row">
    <div class="col-lg-3 mt-3" *ngFor="let ck of cakeData; index as i">
      <div class="cakebox" *ngIf="i<=3">
        <img src="{{ck.cakeImg}}" />
        <h1>{{ck.cakeName}}</h1>
        <p>{{ck.cakePrice | currency:'EUR'}}</p>
      </div>
    </div>
  </div>
  <a routerLink="menu" class="viewmorebtn">Zobraziť viac<i class="bi bi-arrow-right"></i></a>
</div>

Thank you for your answers!

Upvotes: 0

Views: 43

Answers (1)

Matthew Ngan
Matthew Ngan

Reputation: 36

.content {
  top: 25%;
  left: 5%;
  position: absolute;
}

The container of the h1 is positioned absolutely. The default z-index is causing it to overlap other elements which have a smaller z-index value.

Setting the z-index of the .content div and navbar may help to solve the problem.

.content {
  top: 25%;
  left: 5%;
  position: absolute;
  z-index: 10; /** something smaller than the z-index of the navbar **/
}

.navbar {
   ...
   z-index: 20; /** something bigger than the z-index of .content **/
}

Upvotes: 1

Related Questions