Body going all the way up to the navbar when scrolling

user_11449659 0
Viewed 26

I have an issue with my Navbar, when I try to scroll, the body goes all the way up behind the logo. See below picture for reference:

enter image description here

Is there anyway I could make the body disappear when I scroll? Preferably it would disappear before the red line.

enter image description here

Sorry for my bad english and if the question might be a bit dumb. New to development, still learning :)

Here's my CSS code for the navbar:

#header {
  height: 100px;
  transition: all 0.5s;
  z-index: 997;
  transition: all 0.5s;
  background: rgba(42, 44, 57, 0.9);
}

#header.header-transparent {
  background: transparent;
}

#header.header-scrolled {
  background: #fff;
}

#header .logo h1 {
  font-size: 28px;
  margin: 0;
  padding: 0;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 1px;
}

css html
1 Answers

Have you tried changing the background color of the navbar:

#header {
  height: 100px;
  transition: all 0.5s;
  z-index: 997;
  transition: all 0.5s;
  background: white;
}

#header.header-transparent {
  background: transparent;
}

#header.header-scrolled {
  background: #fff;
}

#header .logo h1 {
  font-size: 28px;
  margin: 0;
  padding: 0;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 1px;
}
user_132622040
Related