Aim: that when send button is clicked for the div below moves down as well meaning they dont overlap eachother.
problem: that when the send button is clicked teh box that animates out overlaps the div below making it look bad. this is what im trying to fix
before being clicked
after being clicked
.share-container {
margin: 0;
padding: 0;
list-style: none;
max-height: 300px;
width: 350px;
margin-bottom: 30px;
margin-top: 30px;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
li {
color: black;
}
.share-link {
width: 40px;
height: 10px;
position: absolute;
background-color: #fff;
border-radius: 50%;
transition: all 0.5s ease;
box-shadow: 3px 5px 10px rgba(23, 22, 36, 0.4);
overflow: hidden;
}
.share-link li {
opacity: 0;
color: black;
text-transform: uppercase;
width: 100%;
margin: auto 0;
display: flex;
justify-content: start;
flex-direction: row;
margin-bottom: 2px;
padding: 7.5px 0 7.5px 20px;
cursor: pointer;
}
.share-link li i {
width: 18px;
height: 18px;
margin-right: 10px;
transition: all 0.3s ease 1s;
}
.share-link.active li:nth-child(1) {
transition: all 0.3s ease 0.8s;
}
.share-link.active li:nth-child(2) {
transition: all 0.3s ease 1s;
}
.share-link.active li:nth-child(3) {
transition: all 0.3s ease 1.2s;
}
.share-link.active li {
transition: all 0.5s ease 0.7s;
opacity: 1;
font-size: 13.5px;
}
.share-link.active {
width: 170px;
height: 130px;
border-radius: 15px;
transform: translate(-22%, 23%);
transition: all 0.5s ease 0.4s;
padding: 10px 0;
}
.send,
.close {
color: #1c92d2;
font-size: 20px;
}
.whatsapp,
.mail {
color: #1c92d2;
font-size: 19px;
}
a {
text-decoration: none;
}
li a {
color: black !important;
}
.social-link {
width: 50px;
height: 50px;
overflow: hidden;
background-color: #fff;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
position: absolute;
transition: transform 0.3s ease-in-out;
border: 2px solid #1c92d2;
}
.social-link .send {
width: 50%;
margin-top: 2px;
position: absolute;
transition: transform 0.3s ease;
transition-delay: 0.2s;
animation: sendback 0.3s ease-in-out 0.5s;
}
.social-link .close {
width: 25%;
position: absolute;
transform: scale(0);
animation: rotate-reverse 0.4s ease;
}
.social-link.active {
transition-delay: 0.3s;
transform: translate(100%, 100%);
}
.social-link.active .send {
transition-delay: 0.5s;
transform: translate(94%, 94%);
}
.social-link.active .close {
transform: scale(1);
transition-delay: 0.7s;
animation: rotate 0.3s ease 0.7s;
}
#keyframes rotate {
0% {
transform: rotate(0deg) scale(0);
}
100% {
transform: rotate(90deg) scale(1);
}
}
#keyframes rotate-reverse {
0% {
transform: rotate(0deg) scale(1);
}
100% {
transform: rotate(-90deg) scale(0);
}
}
<div class="share-container">
<ul class="share-link">
<li>
<a href="">
<i class="fab whatsapp fa-whatsapp" alt="Whatsapp"></i>Whatsapp</a>
</li>
<li>
<a href="{{ photo.img.url }}" download="{{ photo.img.url }}">
<i class="fas fa-cloud-download-alt dnld" type="submit"></i>Download</a>
</li>
<li>
<a href="">
<i class="fas fa-envelope mail" alt="mail"></i>Email</a>
</li>
</ul>
<div class="social-link">
<i class="send fas fa-paper-plane" alt="send"></i>
<i class="close fas fa-times" alt="close"></i>
</div>
</div>
</div>
<div class="email-list">
<h4>Join our email list to get new updates</h4>
<div style="background-color: #d9edf7; border-radius: 10px;">
{% if messages %} {% for message in messages %}
<p class="send-message" style="">{{ message }}</p>
{% endfor %} {% endif %}
</div>
<form method="post" enctype="multipart/form-data">
{% csrf_token %}
<button type="submit" class="btn button-animate" id="anonimize-btn">Submit</button>
</form>
</div>
```
thank you inadvance any answers are helpful
I've added padding-bottom: 100px; to the .share-container to push contents down when the container is open.
.share-container {
margin: 0;
padding: 0;
list-style: none;
max-height: 300px;
width: 350px;
margin-bottom: 30px;
margin-top: 30px;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
padding-bottom: 100px;
}
li {
color: black;
}
.share-link {
width: 40px;
height: 10px;
position: absolute;
background-color: #fff;
border-radius: 50%;
transition: all 0.5s ease;
box-shadow: 3px 5px 10px rgba(23, 22, 36, 0.4);
overflow: hidden;
}
.share-link li {
opacity: 0;
color: black;
text-transform: uppercase;
width: 100%;
margin: auto 0;
display: flex;
justify-content: start;
flex-direction: row;
margin-bottom: 2px;
padding: 7.5px 0 7.5px 20px;
cursor: pointer;
}
.share-link li i {
width: 18px;
height: 18px;
margin-right: 10px;
transition: all 0.3s ease 1s;
}
.share-link.active li:nth-child(1) {
transition: all 0.3s ease 0.8s;
}
.share-link.active li:nth-child(2) {
transition: all 0.3s ease 1s;
}
.share-link.active li:nth-child(3) {
transition: all 0.3s ease 1.2s;
}
.share-link.active li {
transition: all 0.5s ease 0.7s;
opacity: 1;
font-size: 13.5px;
}
.share-link.active {
width: 170px;
height: 130px;
border-radius: 15px;
transform: translate(-22%, 23%);
transition: all 0.5s ease 0.4s;
padding: 10px 0;
}
.send,
.close {
color: #1c92d2;
font-size: 20px;
}
.whatsapp,
.mail {
color: #1c92d2;
font-size: 19px;
}
a {
text-decoration: none;
}
li a {
color: black !important;
}
.social-link {
width: 50px;
height: 50px;
overflow: hidden;
background-color: #fff;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
position: absolute;
transition: transform 0.3s ease-in-out;
border: 2px solid #1c92d2;
}
.social-link .send {
width: 50%;
margin-top: 2px;
position: absolute;
transition: transform 0.3s ease;
transition-delay: 0.2s;
animation: sendback 0.3s ease-in-out 0.5s;
}
.social-link .close {
width: 25%;
position: absolute;
transform: scale(0);
animation: rotate-reverse 0.4s ease;
}
.social-link.active {
transition-delay: 0.3s;
transform: translate(100%, 100%);
}
.social-link.active .send {
transition-delay: 0.5s;
transform: translate(94%, 94%);
}
.social-link.active .close {
transform: scale(1);
transition-delay: 0.7s;
animation: rotate 0.3s ease 0.7s;
}
#keyframes rotate {
0% {
transform: rotate(0deg) scale(0);
}
100% {
transform: rotate(90deg) scale(1);
}
}
#keyframes rotate-reverse {
0% {
transform: rotate(0deg) scale(1);
}
100% {
transform: rotate(-90deg) scale(0);
}
}
<div class="share-container">
<ul class="share-link">
<li>
<a href="">
<i class="fab whatsapp fa-whatsapp" alt="Whatsapp"></i>Whatsapp</a>
</li>
<li>
<a href="{{ photo.img.url }}" download="{{ photo.img.url }}">
<i class="fas fa-cloud-download-alt dnld" type="submit"></i>Download</a>
</li>
<li>
<a href="">
<i class="fas fa-envelope mail" alt="mail"></i>Email</a>
</li>
</ul>
<div class="social-link">
<i class="send fas fa-paper-plane" alt="send"></i>
<i class="close fas fa-times" alt="close"></i>
</div>
</div>
</div>
<div class="email-list">
<h4>Join our email list to get new updates</h4>
<div style="background-color: #d9edf7; border-radius: 10px;">
{% if messages %} {% for message in messages %}
<p class="send-message" style="">{{ message }}</p>
{% endfor %} {% endif %}
</div>
<form method="post" enctype="multipart/form-data">
{% csrf_token %}
<button type="submit" class="btn button-animate" id="anonimize-btn">Submit</button>
</form>
</div>
```
the last :checked call in my css code is not working. I want to be ably to have the .nav-bar-element's move from off the screen to where they are now when the hamburger icon is clicked, but I can't seem to get the selector working.
#import url('https://fonts.googleapis.com/css?family=Raleway');
body {
background-image: url(http://www.hayesandjarvis.co.uk/medias/sys_master/hcf/hbb/8912480731166.jpg);
min-height: 100%;
position: relative;
opacity: 0.75;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin: 0;
font: 400 15px/1.8"Raleway", sans-serif;
color: #777;
}
.nav-bar {
z-index: 100;
background-color: rgba(255, 255, 255, 0.2);
width: 100vw;
height: 64px;
overflow: hidden;
position: absolute;
font-weight: bold;
font-size: 18px;
}
.nav-bar:hover {
background-color: rgba(255, 255, 255, 0.6);
-webkit-transition: 0.4s ease, width 0.3s ease;
transition: 0.4s ease, width 0.3s ease;
}
.nav-content {
position: absolute;
right: 0px;
float: right;
height: 64px;
width: 512px;
color: #000;
}
.nav-content .nav-bar-element {
float: left;
margin: 0px;
width: 100px;
height: 32px;
margin: 16px 25px 16px 25px;
}
.nav-content .nav-bar-element a {
width: 100px;
height: 32px;
text-decoration: none;
color: #000;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#nav-button {
display: none;
}
.menu-button {
z-index: 101;
vertical-align: baseline;
position: absolute;
height: 48px;
width: 48px;
top: 8px;
right: 25px;
}
.bar {
position: absolute;
height: 2px;
width: 66%;
background-color: #000;
left: 20%;
-webkit-transition: 0.4s ease, width 0.3s ease;
transition: 0.4s ease, width 0.3s ease;
}
.bar:nth-child(1) {
top: 24%;
}
.bar:nth-child(2) {
top: 47%;
}
.bar:nth-child(3) {
top: 47%;
}
.bar:nth-child(4) {
top: 71%;
}
#nav-button:checked+ .menu-button .bar:nth-child(1) {
width: 0px;
}
#nav-button:checked+ .menu-button .bar:nth-child(2) {
-webkit-transform: translateX(-50%) rotate(45deg);
transform: rotate(45deg);
}
#nav-button:checked+ .menu-button .bar:nth-child(3) {
-webkit-transform: translateX(-50%) rotate(-45deg);
transform: rotate(-45deg);
}
#nav-button:checked+ .menu-button .bar:nth-child(4) {
width: 0px;
}
#nav-button:checked+ #change-me {
color: #fff;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="bgimg-1">
<!--<div class="nav-bar-bg"></div>-->
<div class="nav-bar">
<input type="checkbox" id="nav-button" />
<label for="nav-button" class="menu-button">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</label>
<div class="nav-content" id="change-me">
<div class="nav-bar-element"><i class="fa fa-rocket" aria-hidden="true"></i> Projects
</div>
<div class="nav-bar-element"><i class="fa fa-user" aria-hidden="true"></i> About Me
</div>
<div class="nav-bar-element"><i class="fa fa-inbox" aria-hidden="true"></i> Contact
</div>
</div>
</div>
</div>
I need glasses it is a sibling, but not the adjacent sibling, so use ~ instead of +
OR
Use + between checkbox and label and a + between label and #change-me,
Remove the + on last ruleset, because #change-me is a child of #nav-button, not na sibling.
OK I finally got enough specificity! Use this:
#nav-button:checked ~ .nav-content#change-me * {
color: #fff;
}
SNIPPET
#import url('https://fonts.googleapis.com/css?family=Raleway');
body {
background-image: url(http://www.hayesandjarvis.co.uk/medias/sys_master/hcf/hbb/8912480731166.jpg);
min-height: 100%;
position: relative;
opacity: 0.75;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin: 0;
font: 400 15px/1.8"Raleway", sans-serif;
color: #777;
}
.nav-bar {
z-index: 100;
background-color: rgba(255, 255, 255, 0.2);
width: 100vw;
height: 64px;
overflow: hidden;
position: absolute;
font-weight: bold;
font-size: 18px;
}
.nav-bar:hover {
background-color: rgba(255, 255, 255, 0.6);
-webkit-transition: 0.4s ease, width 0.3s ease;
transition: 0.4s ease, width 0.3s ease;
}
.nav-content {
position: absolute;
right: 0px;
float: right;
height: 64px;
width: 512px;
color: #000;
}
.nav-content .nav-bar-element {
float: left;
margin: 0px;
width: 100px;
height: 32px;
margin: 16px 25px 16px 25px;
}
.nav-content .nav-bar-element a {
width: 100px;
height: 32px;
text-decoration: none;
color: #000;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#nav-button {
display: none;
}
.menu-button {
z-index: 101;
vertical-align: baseline;
position: absolute;
height: 48px;
width: 48px;
top: 8px;
right: 25px;
}
.bar {
position: absolute;
height: 2px;
width: 66%;
background-color: #000;
left: 20%;
-webkit-transition: 0.4s ease, width 0.3s ease;
transition: 0.4s ease, width 0.3s ease;
}
.bar:nth-child(1) {
top: 24%;
}
.bar:nth-child(2) {
top: 47%;
}
.bar:nth-child(3) {
top: 47%;
}
.bar:nth-child(4) {
top: 71%;
}
#nav-button:checked+ .menu-button .bar:nth-child(1) {
width: 0px;
}
#nav-button:checked+ .menu-button .bar:nth-child(2) {
-webkit-transform: translateX(-50%) rotate(45deg);
transform: rotate(45deg);
}
#nav-button:checked+ .menu-button .bar:nth-child(3) {
-webkit-transform: translateX(-50%) rotate(-45deg);
transform: rotate(-45deg);
}
#nav-button:checked+ .menu-button .bar:nth-child(4) {
width: 0px;
}
#nav-button:checked ~ .nav-content#change-me * {
color: #fff;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sam Erickson</title>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="bgimg-1">
<!--<div class="nav-bar-bg"></div>-->
<div class="nav-bar">
<input type="checkbox" id="nav-button" />
<label for="nav-button" class="menu-button">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</label>
<div class="nav-content" id="change-me">
<div class="nav-bar-element"><i class="fa fa-rocket" aria-hidden="true"></i> Projects
</div>
<div class="nav-bar-element"><i class="fa fa-user" aria-hidden="true"></i> About Me
</div>
<div class="nav-bar-element"><i class="fa fa-inbox" aria-hidden="true"></i> Contact
</div>
</div>
</div>
</body>
</html>
I created a pop up menu here: https://jsfiddle.net/qpbmyhor/
Now I want the pop out menu links to be clickable. Right now when you hover your mouse to it, it will just dissapper and its not clickable. Also how can make the whole canvas/menus RESPONSIVE?
Here's my CSS:
ul.icon-menu {margin-top:29px;}
li.icon-box {width: 120px; height: 120px; list-style: none; left: -47px; position: relative; margin-bottom: 3px;}
li.icon-box.home {background: #e74c3c;}
li.icon-box.aboutme {background: #1dd0ad;}
li.icon-box.portfolio {background: #3498db;}
li.icon-box.blog {background: #f1c40f;}
li.icon-box.contact {background: #f39c12;}
.icon-box h2{Museo500-Regular; font-size: 20px; text-shadow: 1px 1px 2px rgba(150, 150, 150, 1);}
.icon-box a {display: block;}
/*= TITLE BOXES
--------------------------------------------------------*/
.icon-box.home h2 {
z-index: -999;
position: absolute;
top: 0;
left: 0;
opacity: 0;
background: #E74C3C;
line-height: 120px;
width: 120px;
-webkit-transition: all .3s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
border-left: 3px solid #a7382d;
}
.icon-box.home a:hover h2 {
opacity: 1; left: 120px; margin: 0;
text-align: center;
}
.icon-box.aboutme h2 {
z-index: -999;
position: absolute;
top: 0;
left: 0;
opacity: 0;
background: #1dd0ad;
line-height: 120px;
width: 120px;
-webkit-transition: all .3s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
border-left: 3px solid #0d866e;
}
.icon-box.aboutme a:hover h2 {
opacity: 1; left: 120px; margin: 0;
text-align: center;
}
.icon-box.portfolio h2 {
z-index: -999;
position: absolute;
top: 0;
left: 0;
opacity: 0;
background: #3498db;
line-height: 120px;
width: 120px;
-webkit-transition: all .3s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
border-left: 3px solid #2177b1;
}
.icon-box.portfolio a:hover h2 {
opacity: 1; left: 120px; margin: 0;
text-align: center;
}
.icon-box.blog h2 {
z-index: -999;
position: absolute;
top: 0;
left: 0;
opacity: 0;
background: #f1c40f;
line-height: 120px;
width: 120px;
-webkit-transition: all .3s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
border-left: 3px solid #b8960e;
}
.icon-box.blog a:hover h2 {
opacity: 1; left: 120px; margin: 0;
text-align: center;
}
.icon-box.contact h2 {
z-index: -999;
position: absolute;
top: 0;
left: 0;
opacity: 0;
background: #f39c12;
line-height: 120px;
width: 120px;
-webkit-transition: all .3s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
border-left: 3px solid #bc780d;
}
.icon-box.contact a:hover h2 {
opacity: 1; left: 120px; margin: 0;
text-align: center;
}
/*= MENU ICONS
--------------------------------------------------------*/
span.icon { display: inline-block; background: url('../img/icon-sprites.png')no-repeat; width: 32px; height: 32px; margin: 43px 40px;}
span.icon.home { background-position: 0px 0px;}
span.icon.aboutme { background-position: -36px 0px;}
span.icon.portfolio { background-position: -72px 0px;}
span.icon.blog { background-position: -109px 0px;}
span.icon.contact { background-position: -145px 0px;}
Any idea? if you could show me the JSFIDDLE SOLUTIONS too!
NOTE it must pop out at the bottom of the icon box.
you need to change z-index to 0 for icon-box class to achieve what you are looking for.
For instance,
.icon-box.aboutme h2, .icon-box.home h2, .icon-box.portfolio h2, .icon-box.blog h2, .icon-box.contact h2{
z-index:0;
}
Live demo
If you want to achieve this keeping the object at the top, solution as below.
Code:
.icon-box a {
padding: 120px;
}
Live demo - 2
Hope this helps.
Use like this, you no need to write css for each menu.
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Untitled 1</title>
<style type="text/css">
ul.icon-menu {margin-top:29px;}
li.icon-box {width: 120px; height: 120px; list-style: none; left: -47px; position: relative; margin-bottom: 3px;}
li.icon-box.home {background: #e74c3c;}
li.icon-box.aboutme {background: #1dd0ad;}
li.icon-box.portfolio {background: #3498db;}
li.icon-box.blog {background: #f1c40f;}
li.icon-box.contact {background: #f39c12;}
.icon-box h2{Museo500-Regular; font-size: 20px; text-shadow: 1px 1px 2px rgba(150, 150, 150, 1);}
.icon-box a {display: block;}
/*= TITLE BOXES
--------------------------------------------------------*/
.icon-box h2 {
position: absolute;
top: 0;
left: 0;
opacity: 0;
background: #E74C3C;
line-height: 120px;
width: 120px;
-webkit-transition: all .3s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
border-left: 3px solid #a7382d;
}
.icon-box a:hover h2 {
opacity: 1; left: 120px; margin: 0;
text-align: center;
}
/*= MENU ICONS
--------------------------------------------------------*/
span.icon { display: inline-block; background: url('../img/icon-sprites.png')no-repeat; width: 32px; height: 32px; margin: 43px 40px;}
span.icon.home { background-position: 0px 0px;}
span.icon.aboutme { background-position: -36px 0px;}
span.icon.portfolio { background-position: -72px 0px;}
span.icon.blog { background-position: -109px 0px;}
span.icon.contact { background-position: -145px 0px;}
</style>
</head>
<body>
<div class="container">
<ul class="icon-menu">
<li class="icon-box home">
<a href="#">
<span class="icon home"></span>
<h2>Home</h2>
</a>
</li>
<li class="icon-box aboutme">
<a href="#">
<span class="icon aboutme"></span>
<h2>About Me</h2>
</a>
</li>
<li class="icon-box portfolio">
<a href="#">
<span class="icon portfolio"></span>
<h2>Portfolio</h2>
</a>
</li>
<li class="icon-box blog">
<a href="#">
<span class="icon blog"></span>
<h2>Blog</h2>
</a>
</li>
<li class="icon-box contact">
<a href="#">
<span class="icon contact"></span>
<h2>Contact</h2>
</a>
</li>
</ul>
</div>
</div>
</body>
</html>
Please have a look on the link.
I just noticed that you are controlling the popover element with every li a:hover and you should avoid it.
I tried to optimize your code and I think it's better to control hover on li element instead of a tag. (It might be possible that you have some different requirement that's why you are controlling it on a:hover)
https://jsfiddle.net/ashubuddy/qpbmyhor/4/
I have placed a border-top in the CSS for #navpromo, however the border line will not display at full 100% width and is aligning to the right with space to the left of the page instead no matter what I try?
CSS:
/*global styles*/
body {
width: 100%;
margin: 0;
list-style: none;
text-decoration: none;
font-size:1.05em;
font-family: Helvetica Neue, Helvetica, Arial, Sans-serif;
}
a{
appearance: none;
font-size:1.05em;
font-family: Helvetica Neue, Helvetica, Arial, Sans-serif;
background:transparent;
color: #000000;
border:none;
letter-spacing:0.15em;
text-transform:uppercase;
transition: color 0.5s ease;
list-style: none;
text-decoration: none;
}
a:focus, a:hover {
color: #e6e8eb;
cursor:pointer;
transition: color 0.5s ease;
}
a:active {
color: #484747;
}
/*----/----global styles*/
/*navigation icon*/
#toggle-menu {
float:right;
display: block;
width: 15px;
height: 15px;
padding: 20px;
}
#toggle-menu div {
width: 15px;
height: 15px;
position: relative;
}
#toggle-menu span {
display: block;
width: 15px;
height: 3px;
background: #545454;
position: absolute;
-webkit-transition: -webkit-transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
-moz-transition: -moz-transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
transition: transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
-webkit-transform-origin: center;
-moz-transform-origin: center;
transform-origin: center;
}
#toggle-menu span.top {
top: 0px;
}
#toggle-menu span.middle {
top: 6px;
}
#toggle-menu span.bottom {
top: 12px;
}
/*----/----navigation icon*/
/*navigation icon animation*/
#toggle-menu.menu-is-active span {
-webkit-transition: -webkit-transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out;
-moz-transition: -moz-transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out;
transition: transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out;
}
#toggle-menu.menu-is-active span.top, #toggle-menu.menu-is-active span.middle {
top: 6px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
#toggle-menu.menu-is-active span.middle {
opacity: 0;
}
#toggle-menu.menu-is-active span.bottom {
top: 6px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/*----/----navigation icon animation*/
/*Nav Bar*/
.header {
border-bottom: 0.5px solid rgba(0,0,0,.2);
background: #ffffff;
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 99999;
}
.nav {
position: fixed;
width: 100%;
text-align: center;
display: inline;
background-color: #ffffff;
left: 0;
top: 39px;
border-bottom: 0.5px solid rgba(0,0,0,.2);
border-top: 0.5px solid rgba(0,0,0,.2);
cursor: pointer;
color: #545454;
font-size:.8em;
letter-spacing:0.05em;
}
.nav > li {
left: 0;
padding-top: 70px;
padding-bottom: 70px;
display: inline-block;
padding-right: 60px;
color: #545454;
}
.seemore {
display: inline-block;
padding-right: 20px;
}
#navpromo{
border-top: 0.5px solid rgba(0,0,0,.2);
padding-top: 40px;
padding-bottom: 40px;
}
#instagram{
display: inline-block;
appearance: none;
width:120px;
height:50px;
font-size:1.05em;
background: transparent;
color: #464c4c;
border:none;
text-align: center;
letter-spacing:0.15em;
text-transform:uppercase;
transition: color 0.5s ease;
outline:none;
border:none;
box-shadow: rgba(30, 22, 54, 0.4) 0 0px 0px 2px inset;
}
#instagram:hover {
color: #e6e8eb;
cursor:pointer;
transition: color 0.5s ease;
}
.nav > li:hover {
left: 0;
padding-top: 0.6em;
padding-bottom: 1em;
cursor:pointer;
}
/*----/----Nav Bar*/
/*in*/
.in {
float:left;
display: inline-block;
width: 25px;
height: 25px;
padding: 15px;
cursor: pointer;
color: #545454;
font-size:.8em;
letter-spacing:0.05em;
border-top: 0.5px solid rgba(0,0,0,.2);
}
/*----/----in*/
/*logo*/
.logo {
position: absolute;
left: 50%;
display: inline-block;
width: 15px;
height: 15px;
padding: 18px;
cursor: pointer;
color: #545454;
font-size:.8em;
letter-spacing:0.05em;
}
/*----/----logo*/
/*Panels*/
.panel {
width: 100%;
color: #adadad;
height: 15em;
padding: 7em;
box-sizing: border-box;
background: #ffffff;
border-top: 0.5px solid rgba(0,0,0,.2);
text-align: center;
}
#panel1 {
background: #b8b8b8;
height: 30em;
}
.links{
color: #adadad;
}
/*----/----Panels*/
/*promo video scroll*/
#hero, section {
padding: 150px;
}
#scroll {
color: white;
font-size: 26px;
line-height: 26px;
cursor: pointer;
position: absolute;
left:50%;
-webkit-transition: -webkit-transform 0.6s ease;
-moz-transition: -moz-transform 0.6s ease;
transition: transform 0.6s ease;
}
#scroll.clicked {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
}
#scroll.rotate {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(3180deg);
}
#scroll span {
position: relative;
bottom: -10px;
}
.arrow-bounce {
-webkit-animation: arrow 1s infinite;
-moz-animation: arrow 1s infinite;
-o-animation: arrow 1s infinite;
animation: arrow 1s infinite;
animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
}
#-webkit-keyframes arrow {
0% {
bottom: -13px;
}
50% {
bottom: -8px;
}
100% {
bottom: -13px;
}
}
#-moz-keyframes arrow {
0% {
bottom: -13px;
}
50% {
bottom: -8px;
}
100% {
bottom: -13px;
}
}
#keyframes arrow {
0% {
bottom: -13px;
}
50% {
bottom: -8px;
}
100% {
bottom: -13px;
}
}
/*----/----promo video scroll*/
/*contact panel*/
* {
font-family: "helvetica";
font-weight: normal;
font-size: 1em;
}
#wrapper {
width: 100%;
padding: 30px 20px;
text-align: center;
box-sizing: border-box;
color: #adadad;
background: #ededed;
font-size:.8em;
letter-spacing:0.05em;
border-top: 0.5px solid rgba(0,0,0,.2);
}
[value*='Contact'], .module fieldset [type="submit"] [id="changetext"] {
appearance: none;
width:120px;
height:50px;
font-size:1.05em;
background: transparent;
color: #e6e8eb;
border:none;
text-align: center;
letter-spacing:0.15em;
text-transform:uppercase;
transition: color 0.5s ease;
outline:none;
border:none;
box-shadow: rgba(30, 22, 54, 0.4) 0 0px 0px 2px inset;
}
[value*='Contact'], .module fieldset [type="submit"] [id="changetext"]:hover {
color: #464c4c;
cursor:pointer;
transition: color 0.5s ease;
}
.module {
width: 100%;
margin: 1rem auto;
padding: 1rem;
}
.module fieldset {
overflow: hidden;
border: none;
}
.module fieldset [type="text"] {
display: block;
margin: 0 auto;
width: 80%;
border: 0;
border-bottom: 1px solid rgba(0,0,0,.2);
line-height: 20px;
margin-bottom: 10px;
font-size: 1em;
background: transparent;
color: rgba(0,0,0,.4);
width: 50%;
padding: 0.5rem;
}
.single {
height: 25px;
}
.module fieldset textarea {
display: block;
width: 100%;
padding: 1rem;
height: 125px;
}
/*----/----contact form*/
/*social panel*/
.followcontainer {
text-align: center;
background: #ededed;
}
.follow {
left: 50%;
display: inline-block;
width: 175px;
text-align: center;
padding-top: 2em;
padding-bottom: 4em;
color: #adadad;
background: #ededed;
font-size:.8em;
letter-spacing:0.05em;
}
.followcopywright {
left: 50%;
display: inline-block;
text-align: center;
padding-top: 2em;
padding-bottom: 4em;
color: #adadad;
background: #ededed;
font-size:.8em;
letter-spacing:0.05em;
}
/*social icons*/
.social-buttons {
height: 45px;
font-size: 0;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
background: #ededed;
}
.social-button {
display: inline-block;
background-color: #ededed;
width: 45px;
height: 45px;
line-height: 45px;
margin: 0 10px;
text-align: center;
position: relative;
overflow: hidden;
opacity: .99;
border-radius: 50%;
box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.05);
-webkit-transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
}
.social-button:before {
content: '';
background-color: #000;
width: 120%;
height: 120%;
position: absolute;
top: 90%;
left: -110%;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
}
.social-button .fa {
font-size: 38px;
vertical-align: middle;
-webkit-transform: scale(0.8);
-ms-transform: scale(0.8);
transform: scale(0.8);
-webkit-transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
}
.social-button.facebook:before {
background-color: #3B5998;
}
.social-button.facebook .fa {
color: #3B5998;
}
.social-button.twitter:before {
background-color: #3CF;
}
.social-button.twitter .fa {
color: #3CF;
}
.social-button.google:before {
background-color: #DC4A38;
}
.social-button.google .fa {
color: #DC4A38;
}
.social-button.dribbble:before {
background-color: #F26798;
}
.social-button.dribbble .fa {
color: #F26798;
}
.social-button.skype:before {
background-color: #00AFF0;
}
.social-button.skype .fa {
color: #00AFF0;
}
.social-button:focus:before, .social-button:hover:before {
top: -10%;
left: -10%;
}
.social-button:focus .fa, .social-button:hover .fa {
color: #fff;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
/*----/----social panel*/
/*footer*/
footer {
float: left;
display: inline-block;
text-align: center;
background: 232,232,232,0;
border-top: 1px solid rgba(0,0,0,.2);
}
/*----/----footer*/
/****landscape****/
#media (min-width: 850px) {
}
/*----/----Landscape*/
HTML:
<div class="header">
<div class="navbar">
<a href="" class="in" style="display: inline-block;">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 155.2 144" style="enable-background:new 0 0 155.2 144;" xml:space="preserve">
<path style="fill:#545454;" d="M42.7,122.7H21.3V54h21.4V122.7z M32,44.6c-6.8,0-12.4-5.6-12.4-12.4c0-6.8,5.5-12.4,12.4-12.4
c6.8,0,12.4,5.5,12.4,12.4C44.4,39,38.9,44.6,32,44.6z M122.7,122.7h-21.3V89.3c0-8-0.1-18.2-11.1-18.2c-11.1,0-12.8,8.7-12.8,17.6
v34H56.1V54h20.5v9.4h0.3c2.8-5.4,9.8-11.1,20.2-11.1c21.6,0,25.6,14.2,25.6,32.7V122.7z"/>
<g>
<path style="fill:#FFFFFF;" d="M151.9,120c0.7-0.1,1-0.5,1-1.1c0-0.8-0.5-1.1-1.4-1.1H150v4h0.6V120h0.7l0,0l1.1,1.7h0.6L151.9,120
L151.9,120z M151.3,119.6h-0.7v-1.4h0.9c0.4,0,0.9,0.1,0.9,0.6C152.4,119.5,151.9,119.6,151.3,119.6z"/>
<path style="fill:#FFFFFF;" d="M151.3,116c-2.1,0-3.8,1.7-3.8,3.8c0,2.1,1.7,3.8,3.8,3.8c2.1,0,3.8-1.7,3.8-3.8
C155.2,117.6,153.5,116,151.3,116z M151.3,123.1c-1.8,0-3.3-1.4-3.3-3.3c0-1.9,1.4-3.3,3.3-3.3c1.8,0,3.3,1.4,3.3,3.3
C154.6,121.7,153.2,123.1,151.3,123.1z"/>
</g>
</svg>
</a>
Logo
<a id="toggle-menu">
<div>
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
</a>
<ul class="nav">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
<div id="navpromo">
<li class="seemore">Want to see more? Check out my instagram!</li>
</li><input type='submit' id="instagram" value="instagram"> </li>
</div>
</ul>
</div>
</div>
<div class="maincontent">
<div class="panel" id="panel1">
<div id="hero">
</div>
<div id="scroll">
<span class="arrow-bounce">↓</span>
</div>
</div>
<div class="panel" id="panel2">
<div class="inner">
Work Title 1
</div>
</div>
<div class="panel" id="panel3">
<div class="inner">
Work Title 2
</div>
</div>
<div class="panel" id="panel4">
<div class="inner">
Work Title 3
</div>
</div>
<div class="panel" id="panel5">
<div class="inner">
Work Title 4
</div>
</div>
<div class="panel" id="panel6">
<div class="inner">
Work Title 5
</div>
</div>
<div class="panel" id="panel7">
<div class="inner">
Work Title 6
</div>
</div>
<div id='wrapper'>
<input type='submit' value='Contact' id="changetext">
<div class='module' id='measure'>
<fieldset>
<legend></legend>
<input class="single" type='text' placeholder='Name' />
<input class="single" type='text' placeholder='Email' />
<input class="single" type='text' placeholder='Phone' />
<textarea class="message" type='text' placeholder='Message' ></textarea>
<input type='submit' id="send">
</fieldset>
</div>
</div>
<div class="followcontainer">
<div class="follow"> <p>I'd love to hear from you.</p>Drop me a line at #email.com.Boost my ego with a Facebook like.And please stalk me on Instagram #instagram.</div>
</div>
<div class="social-buttons">
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-google"></i>
<i class="fa fa-dribbble"></i>
<i class="fa fa-skype"></i>
</div>
<div class="followcontainer">
<div class="followcopywright">© Copywright 2015</div>
</div>
Change the following:
CSS:
.nav {
position: fixed;
width: 100%;
text-align: center;
display: inline;
background-color: #ffffff;
left:-40px;
top: 39px;
border-bottom: 0.5px solid rgba(0,0,0,.2);
border-top: 0.5px solid rgba(0,0,0,.2);
cursor: pointer;
color: #545454;
font-size:.8em;
letter-spacing:0.05em;
clear:both;
}
.nav > li:last-child{
width:100%;
display:block;
}
HTML
<ul class="nav">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
<li>
<div id="navpromo">
<ul>
<li class="seemore">Want to see more? Check out my instagram!</li>
</li><input type='submit' id="instagram" value="instagram"> </li></ul>
</div>
</li>
</ul>
You can also remove the padding from the ul.nav by adding the following style to the .nav class.
padding-left:0;
All ul elements have a default padding.