Dan382
Reputation: 986
Anchor link cutting off header
I'm having issues with anchor links on my page. When clicked my header element gets partially obscured. The bug relates to the use of:
#container {
overflow: hidden;
}
Which I need to stop an overflow bug (due to my use of CSS rotate, which I need for branding / style).
I've tried removing and replacing the above with popular alternatives like:
html, body {
overflow-x: hidden;
}
But this causes other issues.
Any and all suggestion appreciated. Full code enclosed. To simulate issue run the code, click full screen (on desktop) then click the 'about us' button.
function myFunction() {
var x = document.getElementById("primaryNav");
if (x.className === "bg-blue header-nav") {
x.className += " open";
} else {
x.className = "bg-blue header-nav";
}
}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{
margin:0;
padding:0;
border:0;
font:inherit;
font-size:100%;
vertical-align:baseline
}
html{
line-height:1
}
ol,ul{
list-style:none
}
table{
border-collapse:collapse;
border-spacing:0
}
caption,th,td{
text-align:left;
font-weight:normal;
vertical-align:middle
}
q,blockquote{
quotes:none
}
q:before,q:after,blockquote:before,blockquote:after{
content:"";
content:none
}
a img{
border:none
}
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{
display:block
}
@font-face{
font-family:quicksandbold;
src:url(../fonts/quicksand-bold-webfont.eot);
src:url(../fonts/quicksand-bold-webfont.eot?#iefix) format("embedded-opentype"),url(../fonts/quicksand-bold-webfont.woff) format("woff"),url(../fonts/quicksand-bold-webfont.ttf) format("truetype"),url(../fonts/quicksand-bold-webfont.svg#quicksandbold) format("svg");
font-weight:400;
font-style:normal
}
@font-face{
font-family:quicksandregular;
src:url(../fonts/quicksand-regular-webfont.eot);
src:url(../fonts/quicksand-regular-webfont.eot?#iefix) format("embedded-opentype"),url(../fonts/quicksand-regular-webfont.woff) format("woff"),url(../fonts/quicksand-regular-webfont.ttf) format("truetype"),url(../fonts/quicksand-regular-webfont.svg#quicksandregular) format("svg");
font-weight:400;
font-style:normal
}
article li,h1,p,span{
font-family:quicksandregular
}
#blogintro header,.fpblog time,footer p,a,h2,h3,h4,h5,h6{
font-family:quicksandbold
}
#primaryNav,.lrg-font,h2{
font-size:1.4em
}
h1{
font-size:8vw
}
h1 span.full{
font-size:11vw
}
.width-fix{
width:89%
}
.rotate p{
font-size:1em;
line-height:1
}
p,.stop-rotate p,.stop-rotate ul li{
line-height:1.4;
font-size:1.2em
}
h3,h4{
font-size:1.4em
}
small{
font-size:0.8em
}
ul{
text-align:left;
margin:0 auto;
max-width:800px;
padding-left:30px;
width:70%
}
ul li{
padding-bottom:5px
}
ul li::before{
content:"\2022";
color:#000;
display:inline-block;
width:1em;
margin-left:-1em
}
body{
background-color:#27AAE1
}
*{
box-sizing:border-box;
padding:0;
margin:0
}
.hide{
display:none
}
.full-height{
display:grid;
width:100vw;
height:calc(100vh - 92px)
}
.limit-width p,footer{
margin:0 auto;
max-width:90%
}
.limit-width-lrg p{
margin:0 auto;
width:65%;
max-width:870px
}
.white{
color:#fff
}
.bg-blue{
background-color:#27AAE1
}
.blue{
color:#27AAE1
}
.bold,.bold li,.bold p{
font-family:quicksandbold
}
.cntr{
text-align:center
}
.bg-white{
background-color:#fff
}
.rotate{
transform:rotate(-15deg)
}
.stop-rotate{
transform:rotate(15deg)
}
.txt-center{
display:grid;
align-items:center
}
.txt-base{
display:grid;
align-items:end
}
.force-base{
bottom:0;
position:absolute;
left:calc(50% - 200px)
}
.mrg-top{
margin-top:10%
}
body .mrg-top-sml{
margin-top:40px
}
.pad-top{
padding-top:20px
}
.pad-top-lrg{
padding-top:40px
}
.pad-top-xlrg{
padding-top:13.75vh
}
.pad-btm{
padding-bottom:20px
}
.pad-top-sml{
padding-top:5%
}
.section-pad{
padding:15% 0
}
.bg-2 .button{
color:#ECEFF1;
border-color:#ECEFF1
}
.button--winona{
overflow:hidden;
padding:0;
-webkit-transition:border-color 0.3s, background-color 0.3s;
transition:border-color 0.3s, background-color 0.3s;
-webkit-transition-timing-function:cubic-bezier(0.2, 1, 0.3, 1);
transition-timing-function:cubic-bezier(0.2, 1, 0.3, 1)
}
.button--winona::after,.button--winona>span{
padding:1em 0;
transition:transform 0.3s, opacity 0.3s;
transition-timing-function:cubic-bezier(0.2, 1, 0.3, 1);
-webkit-transition:-webkit-transform 0.3s, opacity 0.3s;
-webkit-transition-timing-function:cubic-bezier(0.2, 1, 0.3, 1)
}
.button--winona:hover{
background-color:#fff
}
.button--border-thick{
border:3px solid
}
.button--text-thick{
font-weight:600
}
.button--text-upper{
letter-spacing:2px;
text-transform:uppercase
}
.button--size-s{
font-size:14px
}
.button{
min-width:150px;
max-width:210px;
display:block;
margin:0 auto;
border:3px #27AAE1;
border-style:dashed;
background:rgba(39,170,225,0.12);
color:inherit;
position:relative;
z-index:1;
-webkit-backface-visibility:hidden;
-moz-osx-font-smoothing:grayscale
}
button,html input[type="button"],input[type="reset"],input[type="submit"]{
-webkit-appearance:button;
cursor:pointer
}
button,input{
line-height:normal
}
button{
align-items:flex-start;
text-align:center
}
.button--winona>span{
display:block
}
.button>span{
vertical-align:middle
}
.button--winona::after,.button--winona>span{
padding:1em 0;
-webkit-transition:-webkit-transform 0.3s, opacity 0.3s;
transition:transform 0.3s, opacity 0.3s;
-webkit-transition-timing-function:cubic-bezier(0.2, 1, 0.3, 1);
transition-timing-function:cubic-bezier(0.2, 1, 0.3, 1)
}
.button--winona:hover::after{
opacity:1;
-webkit-transform:translate3d(0, 0, 0);
transform:translate3d(0, 0, 0)
}
.button--winona::after{
content:attr(data-text);
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
opacity:0;
color:#000;
-webkit-transform:translate3d(0, 25%, 0);
transform:translate3d(0, 25%, 0)
}
.button--winona:hover>span{
opacity:0;
-webkit-transform:translate3d(0, -25%, 0);
transform:translate3d(0, -25%, 0)
}
a.btn-link{
color:inherit;
text-decoration:none
}
#primaryNav{
padding:0 20px;
position:relative;
text-align:center
}
#primaryNav a:first-of-type{
padding-top:20px
}
#primaryNav a{
display:none;
color:#fff;
padding-bottom:20px;
text-decoration:none
}
#primaryNav a#nav-burger{
display:block;
position:absolute;
right:20px;
top:-50px;
z-index:999
}
#primaryNav.open a{
display:block
}
#primaryNav #nav-burger{
width:25px;
height:23px;
position:relative;
-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg);
-webkit-transition:.5s ease-in-out;
-moz-transition:.5s ease-in-out;
-o-transition:.5s ease-in-out;
transition:.5s ease-in-out;
cursor:pointer
}
#primaryNav #nav-burger span{
display:block;
position:absolute;
height:3px;
width:100%;
background:#fff;
border-radius:9px;
opacity:1;
left:0;
-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg);
-webkit-transition:.25s ease-in-out;
-moz-transition:.25s ease-in-out;
-o-transition:.25s ease-in-out;
transition:.25s ease-in-out
}
#primaryNav #nav-burger span:nth-child(1){
top:0px;
-webkit-transform-origin:left center;
-moz-transform-origin:left center;
-o-transform-origin:left center;
transform-origin:left center
}
#primaryNav #nav-burger span:nth-child(2){
top:7px;
-webkit-transform-origin:left center;
-moz-transform-origin:left center;
-o-transform-origin:left center;
transform-origin:left center
}
#primaryNav #nav-burger span:nth-child(3){
top:14px;
-webkit-transform-origin:left center;
-moz-transform-origin:left center;
-o-transform-origin:left center;
transform-origin:left center
}
#primaryNav.open #nav-burger span:nth-child(1){
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
top:0;
left:5px
}
#primaryNav.open #nav-burger span:nth-child(2){
width:0%;
opacity:0
}
#primaryNav.open #nav-burger span:nth-child(3){
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);
top:18px;
left:5px
}
#container{
overflow:hidden
}
#logo{
padding-top:20px;
text-align:center
}
#logo svg{
max-width:120px
}
.spill{
width:130%;
margin-left:-15%
}
.stripe-sml{
height:11vh
}
.stripe-sml p{
line-height:1.5;
padding-bottom:18px
}
.stripe-lrg{
height:18vh
}
#scroll-down{
max-width:30px
}
footer{
text-align:center
}
@media only screen and (min-width: 50px){
.foo2{
display:none
}
}
@media only screen and (min-width: 501px){
h1{
font-size:40px
}
}
@media only screen and (min-width: 801px){
.limit-width p{
margin:0 auto;
max-width:60%
}
.full-height{
height:calc(100vh - 154px)
}
.mrg-top{
margin-top:5%
}
h1{
font-size:6vw;
line-height:1.4
}
h1 .white.bold{
line-height:2;
font-size:0.73em
}
h1 .full{
margin-bottom:-2%
}
h3,h4{
font-size:2vw
}
ul{
width:100%;
padding-left:80px
}
.lrg-title{
font-size:3vw
}
#primaryNav a{
display:inline-block !important;
padding:20px 10px
}
#primaryNav a#nav-burger{
display:none !important
}
.height-override{
height:auto
}
.stripe-lrg h1 br{
display:none
}
#scroll-down{
bottom:20px;
position:absolute;
left:calc(50% - 30px)
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Lorem ipsum. | Lorem ipsum.Lorem ipsum.</title>
<link rel="canonical" href="#" /><link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link href="/v2/assets/styles/screen.css?236" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<header class="bg-blue" id="top">
<div id="logo" class="float">
<a href="#">
<svg id="a3ce43e8-fb65-4daf-adde-8a5b63a92355" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 115.71 66.3"><defs><style>.b619fcf4-8929-47b2-8667-741fdd67a7c1{fill:#fff;}</style></defs><title>Lorem ipsum.</title><g id="b100e093-4f59-489c-bf94-25ea2e312f6f" data-name="Group 1"><path id="ba36fb6c-3443-4def-ab41-3ef77b8ca3b4" data-name="Path 1" class="b619fcf4-8929-47b2-8667-741fdd67a7c1" d="M90.17,52.58a22,22,0,1,1,19.07-33.09l6.36-3.65a29.57,29.57,0,1,0-.09,29.52l-6.33-3.68A22,22,0,0,1,90.17,52.58Z" transform="translate(0.11 -0.31)"/><path id="e0462462-ad6f-44e0-9063-0ba927c00cc9" data-name="Path 2" class="b619fcf4-8929-47b2-8667-741fdd67a7c1" d="M45.7,5.27a29.5,29.5,0,0,0-16.41-5h0A29.63,29.63,0,0,0,4.53,13.57C.28,20-.24,24.86-.09,34.43V66.61H7.18V49.87A29.7,29.7,0,1,0,45.7,5.27Zm1.93,37c-.25.36-.5.72-.76,1.06l-.24.32c-.19.24-.38.47-.58.7l-.28.33c-.21.23-.41.45-.63.67a3.07,3.07,0,0,1-.25.26c-.3.3-.6.59-.91.87l-.09.08c-.28.25-.57.5-.87.73l-.3.24L42,48l-.34.23c-.25.18-.51.34-.77.5a2.61,2.61,0,0,1-.28.17c-.35.22-.71.42-1.07.61l-.16.08-1,.46-.35.15c-.26.12-.53.23-.8.33l-.37.14c-.3.11-.59.21-.89.3a2.29,2.29,0,0,1-.28.09c-.38.12-.78.23-1.17.33l-.25.06-.95.2-.39.07-.84.12-.4,0q-.48.06-1,.09l-.26,0c-.4,0-.81,0-1.22,0h-.23c-.4,0-.8,0-1.21,0l-.34,0-1.39-.15-.19,0c-.4-.06-.81-.14-1.22-.22l-.35-.08c-.46-.1-.91-.22-1.37-.35l-.14,0c-.41-.12-.82-.26-1.23-.41l-.34-.13c-.45-.18-.9-.36-1.34-.57l-.08,0c-.41-.19-.82-.41-1.23-.63l-.33-.19c-.43-.24-.85-.5-1.27-.78A22,22,0,0,1,10.9,17.79c.24-.36.5-.72.75-1.06l.25-.32c.18-.24.37-.47.57-.7l.29-.33c.2-.23.41-.45.62-.67l.25-.27c.3-.3.6-.59.91-.86l.12-.1c.27-.24.55-.48.84-.71l.32-.25.7-.51.35-.24c.25-.17.5-.34.76-.5l.28-.17c.35-.21.71-.41,1.07-.6l.19-.1c.3-.16.6-.3.92-.44l.36-.17.79-.32.38-.15L22.5,9l.28-.09c.39-.12.78-.22,1.17-.32l.27-.06c.31-.08.62-.14.92-.2l.4-.07.83-.13.41-.05,1-.09L28,8c.4,0,.81,0,1.21,0h.26c.39,0,.79,0,1.18,0L31,8l1.38.15.21,0q.6.09,1.2.21l.35.08c.46.1.91.22,1.36.35l.16.05c.41.12.81.26,1.22.41l.34.13c.45.17.89.36,1.33.56l.08,0c.42.2.82.41,1.23.63l.33.19c.43.24.85.5,1.27.77a22.07,22.07,0,0,1,6.18,30.58Z" transform="translate(0.11 -0.31)"/></g></svg>
</a>
</div>
</header>
<nav id="primaryNav" class="bg-blue header-nav">
<a href="#">Services</a>
<a href="#">About Us</a>
<a href="#">Contact</a>
<a href="javascript:void(0);" id="nav-burger" class="icon" onclick="myFunction()">
<span></span>
<span></span>
<span></span>
</a>
</nav>
<!-- Home Content -->
<article>
<section class="bg-blue full-height">
<section class="rotate bg-white txt-base cntr mrg-top stripe-sml spill">
<p class="force-base"><span class="bold">We're rebuilding our website...</span><br>Check back shortly to see what we've been up to!</p>
</section>
<section class="cntr spill txt-center rotate stripe-lrg height-override">
<h1>
<div class="full">Lorem ipsum.</div>
<br>
<div class="white bold">Lorem ipsum. Digital Agency</div>
</h1>
</section>
<section class="rotate cntr bg-white txt-center stripe-lrg spill">
<p>Think web design, think Lorem ipsum.</p>
<a class="btn-link" href="#about-us">
<button class="button button--winona button--border-thick button--round-l button--text-upper button--size-s button--text-thick" data-text="Read More"><span>About Us</span></button>
</a>
<p>We Rethink, We Build, We Optimise</p>
</section>
<section class="cntr stripe-lrg">
<a href="#about-us"><svg id="scroll-down" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27.22 26.16"><defs><style>.cls-1{fill:#fff;}</style></defs><title>Scroll Down</title><g id="Group_2" data-name="Group 2"><path id="Path_3" data-name="Path 3" class="cls-1" d="M12.81,26.14,1.11,14.44a1.91,1.91,0,0,1,2.7-2.7h0L14.16,22.1,24.51,11.75a1.91,1.91,0,0,1,2.7,2.7h0l-11.7,11.7a1.91,1.91,0,0,1-2.69,0Z" transform="translate(-0.55 -0.55)"/></g><g id="Group_4" data-name="Group 4"><path id="Path_3-2" data-name="Path 3-2" class="cls-1" d="M12.81,15.5,1.11,3.8a1.91,1.91,0,0,1,2.7-2.7h0L14.16,11.46,24.51,1.11a1.91,1.91,0,0,1,2.7,2.7h0l-11.7,11.7a1.91,1.91,0,0,1-2.69,0Z" transform="translate(-0.55 -0.55)"/></g></svg></a>
</section>
</section>
<section class="section-pad limit-width">
<h2 id="about-us" class="white cntr lrg-title pad-btm">About Us</h2>
<p class="bold white cntr">Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum.</p>
</section>
<section class="rotate bold bg-white section-pad cntr txt-center pad-btm limit-width-lrg spill">
<span class="stop-rotate">
<h3 class="pad-btm">Work With Us</h3>
<p class="bold pad-btm">Lorem ipsum.</p>
<p class="pad-btm">Lorem ipsum.</p>
<p>Lorem ipsum</p>
<h4 class="pad-btm pad-top-lrg mrg-top-sml">What we're looking for:</h4>
<ul>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
</ul>
<a class="btn-link" href="#">
<button class="mrg-top-sml button button--winona button--border-thick button--round-l button--text-upper button--size-s button--text-thick" data-text="Apply Now"><span>Apply Now</span></button>
</a>
</span>
</section>
</article>
<footer class="pad-top-xlrg">
<p class="pad-top white"><small>Lorem Ipsum is a trading style of 'Lorem Ipsum'.</small></p>
<p class="white pad-btm"><small>© Lorem Ipsum Copyright 2020, All Rights Reserved.</small></p>
</footer>
</div>
</body>
</html>Upvotes: 3
Views: 1119
Answers (1)
Awais
Reputation: 4912
Fixes:
I just remove
overflowform#containeras the issue is with this overflow, and addoverflow-x:hiddentobodyand also addscroll-behavior: smoothtohtmlandbodyfor smooth scrolling.
function myFunction() {
var x = document.getElementById("primaryNav");
if (x.className === "bg-blue header-nav") {
x.className += " open";
} else {
x.className = "bg-blue header-nav";
}
}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{
margin:0;
padding:0;
border:0;
font:inherit;
font-size:100%;
vertical-align:baseline
}
html{
line-height:1
}
ol,ul{
list-style:none
}
table{
border-collapse:collapse;
border-spacing:0
}
caption,th,td{
text-align:left;
font-weight:normal;
vertical-align:middle
}
q,blockquote{
quotes:none
}
q:before,q:after,blockquote:before,blockquote:after{
content:"";
content:none
}
a img{
border:none
}
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{
display:block
}
@font-face{
font-family:quicksandbold;
src:url(../fonts/quicksand-bold-webfont.eot);
src:url(../fonts/quicksand-bold-webfont.eot?#iefix) format("embedded-opentype"),url(../fonts/quicksand-bold-webfont.woff) format("woff"),url(../fonts/quicksand-bold-webfont.ttf) format("truetype"),url(../fonts/quicksand-bold-webfont.svg#quicksandbold) format("svg");
font-weight:400;
font-style:normal
}
@font-face{
font-family:quicksandregular;
src:url(../fonts/quicksand-regular-webfont.eot);
src:url(../fonts/quicksand-regular-webfont.eot?#iefix) format("embedded-opentype"),url(../fonts/quicksand-regular-webfont.woff) format("woff"),url(../fonts/quicksand-regular-webfont.ttf) format("truetype"),url(../fonts/quicksand-regular-webfont.svg#quicksandregular) format("svg");
font-weight:400;
font-style:normal
}
article li,h1,p,span{
font-family:quicksandregular
}
#blogintro header,.fpblog time,footer p,a,h2,h3,h4,h5,h6{
font-family:quicksandbold
}
#primaryNav,.lrg-font,h2{
font-size:1.4em
}
h1{
font-size:8vw
}
h1 span.full{
font-size:11vw
}
.width-fix{
width:89%
}
.rotate p{
font-size:1em;
line-height:1
}
p,.stop-rotate p,.stop-rotate ul li{
line-height:1.4;
font-size:1.2em
}
h3,h4{
font-size:1.4em
}
small{
font-size:0.8em
}
ul{
text-align:left;
margin:0 auto;
max-width:800px;
padding-left:30px;
width:70%
}
ul li{
padding-bottom:5px
}
ul li::before{
content:"\2022";
color:#000;
display:inline-block;
width:1em;
margin-left:-1em
}
body{
background-color:#27AAE1
}
*{
box-sizing:border-box;
padding:0;
margin:0
}
.hide{
display:none
}
.full-height{
display:grid;
width:100vw;
height:calc(100vh - 92px)
}
.limit-width p,footer{
margin:0 auto;
max-width:90%
}
.limit-width-lrg p{
margin:0 auto;
width:65%;
max-width:870px
}
.white{
color:#fff
}
.bg-blue{
background-color:#27AAE1
}
.blue{
color:#27AAE1
}
.bold,.bold li,.bold p{
font-family:quicksandbold
}
.cntr{
text-align:center
}
.bg-white{
background-color:#fff
}
.rotate{
transform:rotate(-15deg)
}
.stop-rotate{
transform:rotate(15deg)
}
.txt-center{
display:grid;
align-items:center
}
.txt-base{
display:grid;
align-items:end
}
.force-base{
bottom:0;
position:absolute;
left:calc(50% - 200px)
}
.mrg-top{
margin-top:10%
}
body .mrg-top-sml{
margin-top:40px
}
.pad-top{
padding-top:20px
}
.pad-top-lrg{
padding-top:40px
}
.pad-top-xlrg{
padding-top:13.75vh
}
.pad-btm{
padding-bottom:20px
}
.pad-top-sml{
padding-top:5%
}
.section-pad{
padding:15% 0
}
.bg-2 .button{
color:#ECEFF1;
border-color:#ECEFF1
}
.button--winona{
overflow:hidden;
padding:0;
-webkit-transition:border-color 0.3s, background-color 0.3s;
transition:border-color 0.3s, background-color 0.3s;
-webkit-transition-timing-function:cubic-bezier(0.2, 1, 0.3, 1);
transition-timing-function:cubic-bezier(0.2, 1, 0.3, 1)
}
.button--winona::after,.button--winona>span{
padding:1em 0;
transition:transform 0.3s, opacity 0.3s;
transition-timing-function:cubic-bezier(0.2, 1, 0.3, 1);
-webkit-transition:-webkit-transform 0.3s, opacity 0.3s;
-webkit-transition-timing-function:cubic-bezier(0.2, 1, 0.3, 1)
}
.button--winona:hover{
background-color:#fff
}
.button--border-thick{
border:3px solid
}
.button--text-thick{
font-weight:600
}
.button--text-upper{
letter-spacing:2px;
text-transform:uppercase
}
.button--size-s{
font-size:14px
}
.button{
min-width:150px;
max-width:210px;
display:block;
margin:0 auto;
border:3px #27AAE1;
border-style:dashed;
background:rgba(39,170,225,0.12);
color:inherit;
position:relative;
z-index:1;
-webkit-backface-visibility:hidden;
-moz-osx-font-smoothing:grayscale
}
button,html input[type="button"],input[type="reset"],input[type="submit"]{
-webkit-appearance:button;
cursor:pointer
}
button,input{
line-height:normal
}
button{
align-items:flex-start;
text-align:center
}
.button--winona>span{
display:block
}
.button>span{
vertical-align:middle
}
.button--winona::after,.button--winona>span{
padding:1em 0;
-webkit-transition:-webkit-transform 0.3s, opacity 0.3s;
transition:transform 0.3s, opacity 0.3s;
-webkit-transition-timing-function:cubic-bezier(0.2, 1, 0.3, 1);
transition-timing-function:cubic-bezier(0.2, 1, 0.3, 1)
}
.button--winona:hover::after{
opacity:1;
-webkit-transform:translate3d(0, 0, 0);
transform:translate3d(0, 0, 0)
}
.button--winona::after{
content:attr(data-text);
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
opacity:0;
color:#000;
-webkit-transform:translate3d(0, 25%, 0);
transform:translate3d(0, 25%, 0)
}
.button--winona:hover>span{
opacity:0;
-webkit-transform:translate3d(0, -25%, 0);
transform:translate3d(0, -25%, 0)
}
a.btn-link{
color:inherit;
text-decoration:none
}
#primaryNav{
padding:0 20px;
position:relative;
text-align:center
}
#primaryNav a:first-of-type{
padding-top:20px
}
#primaryNav a{
display:none;
color:#fff;
padding-bottom:20px;
text-decoration:none
}
#primaryNav a#nav-burger{
display:block;
position:absolute;
right:20px;
top:-50px;
z-index:999
}
#primaryNav.open a{
display:block
}
#primaryNav #nav-burger{
width:25px;
height:23px;
position:relative;
-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg);
-webkit-transition:.5s ease-in-out;
-moz-transition:.5s ease-in-out;
-o-transition:.5s ease-in-out;
transition:.5s ease-in-out;
cursor:pointer
}
#primaryNav #nav-burger span{
display:block;
position:absolute;
height:3px;
width:100%;
background:#fff;
border-radius:9px;
opacity:1;
left:0;
-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg);
-webkit-transition:.25s ease-in-out;
-moz-transition:.25s ease-in-out;
-o-transition:.25s ease-in-out;
transition:.25s ease-in-out
}
#primaryNav #nav-burger span:nth-child(1){
top:0px;
-webkit-transform-origin:left center;
-moz-transform-origin:left center;
-o-transform-origin:left center;
transform-origin:left center
}
#primaryNav #nav-burger span:nth-child(2){
top:7px;
-webkit-transform-origin:left center;
-moz-transform-origin:left center;
-o-transform-origin:left center;
transform-origin:left center
}
#primaryNav #nav-burger span:nth-child(3){
top:14px;
-webkit-transform-origin:left center;
-moz-transform-origin:left center;
-o-transform-origin:left center;
transform-origin:left center
}
#primaryNav.open #nav-burger span:nth-child(1){
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
top:0;
left:5px
}
#primaryNav.open #nav-burger span:nth-child(2){
width:0%;
opacity:0
}
#primaryNav.open #nav-burger span:nth-child(3){
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);
top:18px;
left:5px
}
#logo{
padding-top:20px;
text-align:center
}
#logo svg{
max-width:120px
}
.spill{
width:130%;
margin-left:-15%
}
.stripe-sml{
height:11vh
}
.stripe-sml p{
line-height:1.5;
padding-bottom:18px
}
.stripe-lrg{
height:18vh
}
#scroll-down{
max-width:30px
}
footer{
text-align:center
}
@media only screen and (min-width: 50px){
.foo2{
display:none
}
}
@media only screen and (min-width: 501px){
h1{
font-size:40px
}
}
@media only screen and (min-width: 801px){
.limit-width p{
margin:0 auto;
max-width:60%
}
.full-height{
height:calc(100vh - 154px)
}
.mrg-top{
margin-top:5%
}
h1{
font-size:6vw;
line-height:1.4
}
h1 .white.bold{
line-height:2;
font-size:0.73em
}
h1 .full{
margin-bottom:-2%
}
h3,h4{
font-size:2vw
}
ul{
width:100%;
padding-left:80px
}
.lrg-title{
font-size:3vw
}
#primaryNav a{
display:inline-block !important;
padding:20px 10px
}
#primaryNav a#nav-burger{
display:none !important
}
.height-override{
height:auto
}
.stripe-lrg h1 br{
display:none
}
#scroll-down{
bottom:20px;
position:absolute;
left:calc(50% - 30px)
}
}
html,body{
scroll-behavior: smooth;
}
body{
overflow-x: hidden;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Lorem ipsum. | Lorem ipsum.Lorem ipsum.</title>
<link rel="canonical" href="#" /><link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link href="/v2/assets/styles/screen.css?236" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<header class="bg-blue" id="top">
<div id="logo" class="float">
<a href="#">
<svg id="a3ce43e8-fb65-4daf-adde-8a5b63a92355" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 115.71 66.3"><defs><style>.b619fcf4-8929-47b2-8667-741fdd67a7c1{fill:#fff;}</style></defs><title>Lorem ipsum.</title><g id="b100e093-4f59-489c-bf94-25ea2e312f6f" data-name="Group 1"><path id="ba36fb6c-3443-4def-ab41-3ef77b8ca3b4" data-name="Path 1" class="b619fcf4-8929-47b2-8667-741fdd67a7c1" d="M90.17,52.58a22,22,0,1,1,19.07-33.09l6.36-3.65a29.57,29.57,0,1,0-.09,29.52l-6.33-3.68A22,22,0,0,1,90.17,52.58Z" transform="translate(0.11 -0.31)"/><path id="e0462462-ad6f-44e0-9063-0ba927c00cc9" data-name="Path 2" class="b619fcf4-8929-47b2-8667-741fdd67a7c1" d="M45.7,5.27a29.5,29.5,0,0,0-16.41-5h0A29.63,29.63,0,0,0,4.53,13.57C.28,20-.24,24.86-.09,34.43V66.61H7.18V49.87A29.7,29.7,0,1,0,45.7,5.27Zm1.93,37c-.25.36-.5.72-.76,1.06l-.24.32c-.19.24-.38.47-.58.7l-.28.33c-.21.23-.41.45-.63.67a3.07,3.07,0,0,1-.25.26c-.3.3-.6.59-.91.87l-.09.08c-.28.25-.57.5-.87.73l-.3.24L42,48l-.34.23c-.25.18-.51.34-.77.5a2.61,2.61,0,0,1-.28.17c-.35.22-.71.42-1.07.61l-.16.08-1,.46-.35.15c-.26.12-.53.23-.8.33l-.37.14c-.3.11-.59.21-.89.3a2.29,2.29,0,0,1-.28.09c-.38.12-.78.23-1.17.33l-.25.06-.95.2-.39.07-.84.12-.4,0q-.48.06-1,.09l-.26,0c-.4,0-.81,0-1.22,0h-.23c-.4,0-.8,0-1.21,0l-.34,0-1.39-.15-.19,0c-.4-.06-.81-.14-1.22-.22l-.35-.08c-.46-.1-.91-.22-1.37-.35l-.14,0c-.41-.12-.82-.26-1.23-.41l-.34-.13c-.45-.18-.9-.36-1.34-.57l-.08,0c-.41-.19-.82-.41-1.23-.63l-.33-.19c-.43-.24-.85-.5-1.27-.78A22,22,0,0,1,10.9,17.79c.24-.36.5-.72.75-1.06l.25-.32c.18-.24.37-.47.57-.7l.29-.33c.2-.23.41-.45.62-.67l.25-.27c.3-.3.6-.59.91-.86l.12-.1c.27-.24.55-.48.84-.71l.32-.25.7-.51.35-.24c.25-.17.5-.34.76-.5l.28-.17c.35-.21.71-.41,1.07-.6l.19-.1c.3-.16.6-.3.92-.44l.36-.17.79-.32.38-.15L22.5,9l.28-.09c.39-.12.78-.22,1.17-.32l.27-.06c.31-.08.62-.14.92-.2l.4-.07.83-.13.41-.05,1-.09L28,8c.4,0,.81,0,1.21,0h.26c.39,0,.79,0,1.18,0L31,8l1.38.15.21,0q.6.09,1.2.21l.35.08c.46.1.91.22,1.36.35l.16.05c.41.12.81.26,1.22.41l.34.13c.45.17.89.36,1.33.56l.08,0c.42.2.82.41,1.23.63l.33.19c.43.24.85.5,1.27.77a22.07,22.07,0,0,1,6.18,30.58Z" transform="translate(0.11 -0.31)"/></g></svg>
</a>
</div>
</header>
<nav id="primaryNav" class="bg-blue header-nav">
<a href="#">Services</a>
<a href="#">About Us</a>
<a href="#">Contact</a>
<a href="javascript:void(0);" id="nav-burger" class="icon" onclick="myFunction()">
<span></span>
<span></span>
<span></span>
</a>
</nav>
<!-- Home Content -->
<article>
<section class="bg-blue full-height">
<section class="rotate bg-white txt-base cntr mrg-top stripe-sml spill">
<p class="force-base"><span class="bold">We're rebuilding our website...</span><br>Check back shortly to see what we've been up to!</p>
</section>
<section class="cntr spill txt-center rotate stripe-lrg height-override">
<h1>
<div class="full">Lorem ipsum.</div>
<br>
<div class="white bold">Lorem ipsum. Digital Agency</div>
</h1>
</section>
<section class="rotate cntr bg-white txt-center stripe-lrg spill">
<p>Think web design, think Lorem ipsum.</p>
<a class="btn-link" href="#about-us">
<button class="button button--winona button--border-thick button--round-l button--text-upper button--size-s button--text-thick" data-text="Read More"><span>About Us</span></button>
</a>
<p>We Rethink, We Build, We Optimise</p>
</section>
<section class="cntr stripe-lrg">
<a href="#about-us"><svg id="scroll-down" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27.22 26.16"><defs><style>.cls-1{fill:#fff;}</style></defs><title>Scroll Down</title><g id="Group_2" data-name="Group 2"><path id="Path_3" data-name="Path 3" class="cls-1" d="M12.81,26.14,1.11,14.44a1.91,1.91,0,0,1,2.7-2.7h0L14.16,22.1,24.51,11.75a1.91,1.91,0,0,1,2.7,2.7h0l-11.7,11.7a1.91,1.91,0,0,1-2.69,0Z" transform="translate(-0.55 -0.55)"/></g><g id="Group_4" data-name="Group 4"><path id="Path_3-2" data-name="Path 3-2" class="cls-1" d="M12.81,15.5,1.11,3.8a1.91,1.91,0,0,1,2.7-2.7h0L14.16,11.46,24.51,1.11a1.91,1.91,0,0,1,2.7,2.7h0l-11.7,11.7a1.91,1.91,0,0,1-2.69,0Z" transform="translate(-0.55 -0.55)"/></g></svg></a>
</section>
</section>
<section class="section-pad limit-width">
<h2 id="about-us" class="white cntr lrg-title pad-btm">About Us</h2>
<p class="bold white cntr">Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum.</p>
</section>
<section class="rotate bold bg-white section-pad cntr txt-center pad-btm limit-width-lrg spill">
<span class="stop-rotate">
<h3 class="pad-btm">Work With Us</h3>
<p class="bold pad-btm">Lorem ipsum.</p>
<p class="pad-btm">Lorem ipsum.</p>
<p>Lorem ipsum</p>
<h4 class="pad-btm pad-top-lrg mrg-top-sml">What we're looking for:</h4>
<ul>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
</ul>
<a class="btn-link" href="#">
<button class="mrg-top-sml button button--winona button--border-thick button--round-l button--text-upper button--size-s button--text-thick" data-text="Apply Now"><span>Apply Now</span></button>
</a>
</span>
</section>
</article>
<footer class="pad-top-xlrg">
<p class="pad-top white"><small>Lorem Ipsum is a trading style of 'Lorem Ipsum'.</small></p>
<p class="white pad-btm"><small>© Lorem Ipsum Copyright 2020, All Rights Reserved.</small></p>
</footer>
</div>
</body>
</html>Upvotes: 1
Related Questions
- HTML anchor tag takes entire line
- HTML anchor tags are overlapping
- CSS: How to prevent anchor links from scrolling behind fixed header?
- anchor tag is larger than element it holds
- Link exceeding width of container
- Styling breaks after using anchor tag
- CSS Style Header w/Hyperlink Issue
- Why are my anchor links pushing content behind my header?
- How do I avoid anchor links from displaying behind and absolute positioned header?
- css links header problem