Skip to content

Instantly share code, notes, and snippets.

@lucperkins

lucperkins/fixed-navbar.html

Last active May 7, 2018 21:20
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save lucperkins/ff9ce86319ed13492b731b1d27cbced2 to your computer and use it in GitHub Desktop.
Save lucperkins/ff9ce86319ed13492b731b1d27cbced2 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
fixed-navbar.html
<body>
<header>
<nav>
<section class="brand">
<img src="logo.png">
</section>
<section class="menu">
<ul>
<li>
<a href="/products">
Products
</a>
</li>
<li>
<button>
<a href="/sign-up">
Sign up
</a>
</button>
</li>
</ul>
</section>
</nav>
</header>
<main>
<!-- stuff -->
</main>
</body>
Raw
style.sass
header
+fixed
+bc(black) // Background color: black
+h(5rem) // Height of 5 rem
nav
+vc // Vertical center
section.brand
+left
img
+logo // Image container helper
section.menu
+right
ul
li
button
+rounded(5px)
+bc(red) // Background-color: red
a
&:hover
+c(yellow) // Color: yellow
main
+has-fixed-header(5rem)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment