Skip to content

Instantly share code, notes, and snippets.

@lunelson
Last active March 31, 2021 15:31
Show Gist options
  • Save lunelson/d80f1efbb2609d440077a775dd3110b3 to your computer and use it in GitHub Desktop.
Save lunelson/d80f1efbb2609d440077a775dd3110b3 to your computer and use it in GitHub Desktop.
menu-layout-testing
{
"scripts": [],
"styles": []
}
.view
.banner
.site
header.site-header
.spacer
nav.site-header-nav
.navbar
.drawer
nav.site-sidebar-nav
.spacer
nav.site-sidebar-nav
main.site-main
footer.site-footer
nav.site-footer-nav
body {
margin: 0;
padding: 0;
}
.view {
position: relative;
}
.page {
min-height: 100vh;
}
.banner {
height: 20px;
background: blue;
}
.site {
display: flex;
flex-direction: column;
min-height: 100vh;
overflow: hidden;
}
.site-header {
position: sticky;
top: 0;
flex: 0 0 auto;
}
.site-footer {
height: 100px;
background: lightblue;
flex: 0 0 auto;
}
.site-main {
flex: 1 1 auto;
}
.site-header-nav {
.navbar {
background: gray;
height: 50px;
}
.drawer {
position: absolute;
width: 200px;
height: 100vh;
top: 0;
background: pink;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment