Broadway design firm site with css layout position and display properties

Broadway Demo

• For nav to stay fixed on top, set parent container position: fixed;.

<header>
    <nav>
      <ul>
         <li> About </li> <li> Work </li> <li> Team </li> <li> Contact </li>
      </ul>
    </nav>
</header>

header {
  position: fixed;
  width: 100%;
  z-index: 10;
}

Note: For footer add bottom: 0; to make it stay in the bottom since it matters where it is positioned in the page flow.

• When element is inline we couldn't add width, however, we could style the element as inline-block or block.

nav li {
  display: inline-block;
  width: 50px;
  height: 50px;
}

This results li to fit inside of nav as a row

note: When applying display: inline-block; to ol>li, we notice the numbering goes away too!

• Once we set position: relative, we can add offset position properties (top, bottome, left, right) to position relative to the reserved spot in page flow.

nav {
  position: fixed;
}

main {
  position: relative;
  top: 100px;
}

nav is placed top of main in html page flow. position: fixed breaks out element natural html flow and fix its position top: 100px; regardless where it sit in HTML structure.