CODEWITHSUNDEEP
htmlreactjssass
Rishabh Raghwendra
Rishabh Raghwendra

Reputation: 320

My navbar is not overlapping my hero section

I am making a website for my college . I want the navbar to overlap the hero section. I have applied glassmorphism trend to my navbar , so I made the navbar as sticky and set it z-index:1000 and my hero section z-index:-1000 . But then also I am getting this white space behind my navbar (as in screenshot), why ? enter image description here

I am using Reactjs and SASS for it . I am provinding my code below :- Navbar.js:-

import React from "react";
import logo from "../../../assets/GNITLogo.jpg";
function NavBar() {
  return (
    <nav>
      <img src={logo} alt="Logo" />
      <div>
        <a href="#">Home</a>
        <a href="#">Login</a>
        <a href="#">Contact Us</a>
      </div>
    </nav>
  );
}

export default NavBar;

Hero.js (Hero Section):-

    import React from 'react'

function Hero() {
      return (
            <div className="Hero">
                  <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorem itaque eveniet minus ullam illum nemo ipsa incidunt cum? Dignissimos modi amet blanditiis asperiores? Natus modi sint explicabo accusamus blanditiis, voluptas ut provident aliquid enim?</p>
            </div>
      )
}

export default Hero

_navbar.scss :-

nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  position: sticky;
  z-index: 1000;
  top: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.4);
  img {
    height: 5.35rem;
    width: 13rem;
    object-fit: contain;
    margin-left: 2rem;
  }
  a {
    text-decoration: none;
    color: black;
    margin-right: 3rem;
  }
  div {
    margin-left: auto;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 1.3rem;
  }
}

_hero.scss :-

.Hero{
      width: 100vw;
      height: 100vh;
      background-color: #FFEB94;
      z-index: -1000;
}

I am searched for this problem on internet . Mostly answers have solutions using z-index , but I don't know why z-index is not working in my case .

Anyone knows how to remove that white background from navbar and have colour of hero section .

Upvotes: 1

Views: 1046

Answers (1)

Hiren Gabu
Hiren Gabu

Reputation: 85

hero section design fixed screenshot

[![

nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  z-index: 1000;
  top: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  background: transparent;
  position: fixed;
  left: 20px;
  right:20px;
  img {
    height: 5.35rem;
    width: 13rem;
    object-fit: contain;
    margin-left: 2rem;
  }
  a {
    text-decoration: none;
    color: black;
    margin-right: 3rem;
  }
  div {
    margin-left: auto;
    font-weight: bold;
    font-size: 1.3rem;
  }
}

.Hero {
  width: 100vw;
  height: 100vh;
  background-color: #FFEB94;
  z-index: -1000;
  p {
    position: absolute;
    left: 20px;
    right: 20px;
    top: 50%;
  }
}

Upvotes: 1

Related Questions