DEV Community

Cover image for Broadway design firm site with css layout position and display properties
Heggy Castaneda
Heggy Castaneda

Posted on Edited on

Broadway design firm site with css layout position and display properties

#css

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>
Enter fullscreen mode Exit fullscreen mode 
header {
  position: fixed;
  width: 100%;
  z-index: 10;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)