Search code examples
htmlcssresponsive-designsticky

Page won't resize correctly and have a Sticky Nav at the same time

I'm working on designing a page that needs to have the Main Nav to be sticky. I can do this, but when I do the page no longer resizes correctly when the browser window is resized. It suddenly has a long blank space below the footer. But if I try removing the height property of the page, the sticky nav is no longer sticky. I've gone through my code a few times but can't seem to find where the correlation is. I've provided some screenshots as well as my code. Any help or push in the right direction would be appreciated!

  /* site page */

#colocation_new {
  position: relative;
  width: 1920px;
  height: 4652px;
  background-color: white;
  overflow: visible;
  --web-view-name: colocation new;
  --web-view-id: colocation_new;
  --web-scale-to-fit: true;
  --web-scale-to-fit-type: width;
  --web-scale-on-resize: true;
  --web-enable-deep-linking: true;
}


/* Main Nav */

#Main_Nav {
  position: sticky;
  width: 1920px;
  height: 112px;
  left: 0px;
  top: 0px;
  overflow: visible;
  z-index: 1;

Sticky Nav

Long White Space

Solution

  • Just tried your code on a blank HTML page and it looks like your Nav ended up at the bottom of the page.

    You can resolve it in two different ways:

    1. Change your #colocation_new position to absolute.

    OR

    1. Change your #main_nav position to fixed.