Question 71950 in CSS Question posted in
Some basic documentation can be found here.

Why is lowering my screen height hiding content at the top of the screen behind my navigation bar? – Css

I have a very simple portfolio page. Literally just an html file, a directory with images, and a CSS file.

I have an issue within my CSS styling. When I resize the width of my webpage, everything adjusts responsively and it looks great. However, when the height of the screen is too small, all of the content becomes hidden behind the navigation bar I have on the top of the screen:
enter image description here

If you look on the browser vertical scroll bar used to navigate up and down the web page, I am scrolled all the way to the top, but content from the bottom of my webpage/html skeleton is what is showing right underneath my navigation bar:
enter image description here

You can think of my navigation bar as a section and then the about me as a separate section as that is how they are in the html. Here is the CSS affecting those…

navigation bar section:

.nav {
  display: flex;
  justify-content: flex-end;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: var(--main-red);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
  z-index: 10;
}

welcome/about me section:

.welcome-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  background-color: #000;
  background-image: linear-gradient(62deg, #3a3d40 0%, #181719 100%);
}
Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    So, thanks for all the help in identifying the view height was the source of the problem... @all.... although the solution wasn't achieved from calculating the view height, or portioning view height... What I did is just delete the CSS code that specifies the view height and it looks good.

    Thanks all!


  2. 0

    Your height: 100vh; is screwing it up. You can try portioning the vh between your nav and section like below:

    .nav {
  display: flex;
  justify-content: flex-end;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 20vh;
  background: var(--main-red);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
  z-index: 10;
}

.welcome-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 80vh;
  background-color: #000;
  background-image: linear-gradient(62deg, #3a3d40 0%, #181719 100%);
}
    Login or Signup to reply.
  3. 0

    this happens cause you use the height with 100vh, this means that it will take up the entire screen, including the space behind the navigation bar.

    one solution is changing this

    height: 100vh; to this  height: calc(100vh - 60px);

    This code subtracts the height of the navigation bar, I’m assuming the navigation bar is 60 pixels tall, you can modify to the actual real height, and finally the .welcome-section code looks like this

    .welcome-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: calc(100vh - 60px); /* Subtract the height of the navigation bar */
  background-color: #000;
  background-image: linear-gradient(62deg, #3a3d40 0%, #181719 100%);
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search