Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <header>
- <div class="container">
- <div class="fix"></div>
- <div class="main">
- <div class="logo-container">
- <div class="secondary"></div>
- <div class="primary logo"><a>LOGO</a></div>
- </div>
- <nav class="nav">
- <div class="primary">
- <div class="links">
- <ul>
- <li class="styledlink root"><a>Item 01</a></li>
- <li class="styledlink root"><a>Item 02</a></li>
- <li class="styledlink root"><a>Item 03</a></li>
- <li class="styledlink root"><a>Item 04</a></li>
- </ul>
- </div>
- </div>
- <div class="secondary central">
- <div class="links">
- <ul>
- <li class="styledlink"><a>Submenu 01</a></li>
- <li class="styledlink"><a>Submenu 02</a></li>
- <li class="styledlink"><a>Submenu 03</a></li>
- </ul>
- </div>
- </div>
- </nav>
- <div class="cta-container">
- <div class="secondary"></div>
- <div class="primary cta"><a>CTA EXAMPLE</a></div>
- </div>
- </div>
- <div class="hamburger"></div>
- </div>
- </header>
- /* 54 i 35 */
- *,
- *::before,
- *::after {
- box-sizing: border-box;
- }
- body,
- h1,
- h2,
- h3,
- h4,
- p,
- ul,
- ol,
- li,
- figure,
- figcaption,
- blockquote,
- dl,
- dd {
- margin: 0;
- }
- ul,
- ol {
- list-style: none;
- padding: 0;
- }
- header {
- box-sizing: border-box;
- height: auto;
- padding: 0;
- pointer-events: none;
- position: -webkit-sticky;
- position: sticky;
- top: 0;
- width: 100%;
- z-index: 1080;
- }
- .container {
- background: #fff;
- box-shadow: 0px 0px 20px 0px rgba(122, 122, 122, 0.1);
- display: flex;
- pointer-events: auto;
- position: sticky;
- top: 0;
- width: 100%;
- z-index: -1;
- }
- .fix {
- display: none;
- }
- .main {
- display: flex;
- flex-direction: row;
- }
- .main .logo-container a {
- line-height: 0;
- }
- .main .logo-container {
- flex: 1;
- }
- .main .cta-container {
- align-items: center;
- background: #fff;
- bottom: 0;
- display: flex;
- justify-content: center;
- left: 0;
- padding: 16px 40px;
- position: fixed;
- width: 100vw;
- }
- .primary {
- align-items: center;
- display: flex;
- background: #fff;
- }
- .primary.logo {
- justify-content: flex-end;
- height: 54px;
- margin-left: 24px;
- }
- .primary.cta {
- justify-content: center;
- width: 100%;
- }
- .secondary {
- align-items: center;
- display: flex;
- }
- .secondary .links ul .styledlink a,
- .secondary .links ul .styledlink button {
- color: #646060;
- justify-content: flex-start;
- }
- .styledlink {
- padding: 24px 0;
- position: relative;
- width: 100%;
- }
- .styledlink button {
- padding-right: 8px;
- width: 100%;
- }
- .styledlink a,
- .styledlink button {
- align-items: center;
- color: #303030;
- display: flex;
- justify-content: space-between;
- margin-left: 24px;
- text-decoration: none;
- }
- .nav {
- background: #fff;
- display: flex;
- flex-direction: column;
- height: calc(100vh - 54px);
- left: 0;
- overflow-x: hidden;
- overflow-y: auto;
- position: fixed;
- top: 54px;
- transform: translateX(100%);
- transition: 0.65s;
- width: 100%;
- z-index: 1080;
- }
- .nav.open {
- transform: translateX(0);
- }
- .nav .links {
- flex: initial;
- width: 100%;
- }
- .nav .links ul {
- align-items: center;
- display: flex;
- flex-direction: column;
- justify-content: center;
- }
- @media (min-width: 960px) {
- header {
- top: -35px;
- }
- .container {
- align-items: center;
- flex-direction: column;
- position: sticky;
- }
- .fix {
- display: initial;
- height: 35px;
- background: #f7f7f7;
- position: absolute;
- width: 100%;
- }
- .main {
- position: relative;
- max-width: 1280px;
- width: 100%;
- }
- .main .logo-container {
- align-items: flex-start;
- display: flex;
- flex-direction: column;
- height: auto;
- }
- .main .logo-container .logo {
- margin-left: 8px;
- justify-content: flex-start;
- }
- .main .cta-container {
- align-items: flex-end;
- flex-direction: column;
- flex: 1;
- height: auto;
- justify-content: flex-end;
- margin-right: 8px;
- padding: initial;
- position: initial;
- width: auto;
- }
- .primary {
- height: 54px;
- width: 100%;
- }
- .primary.logo {
- margin-left: auto
- }
- .primary.cta {
- justify-content: flex-start;
- width: auto;
- }
- .secondary {
- width: auto;
- background: #f7f7f7;
- height: 35px;
- width: 100%;
- }
- .secondary.central {
- width: auto;
- position: absolute;
- top: 0;
- right: 0;
- }
- .styledlink {
- padding: 16px 16px;
- width: auto;
- }
- .styledlink button {
- padding-right: 0;
- }
- .styledlink a,
- .styledlink button {
- margin: 0;
- }
- .nav {
- align-items: center;
- background: #f7f7f7;
- flex-direction: column-reverse;
- flex: 7;
- height: auto;
- overflow-x: initial;
- overflow-y: initial;
- position: initial;
- transform: initial;
- width: auto;
- }
- .nav .links ul {
- flex-direction: row;
- justify-content: flex-end;
- }
- .nav .primary .links ul .styledlink {
- display: flex;
- height: 54px;
- padding: 0 16px;
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement