Vertically center div responsively - javascript

I'm trying to vertically center the nav panel responsively, so that it is centered on all screens that are ~940px and up. I found this article CSS-Tricks but I have been unable to implement this with my current code effectively.
html
<body>
<!-- Header -->
<div class="header">
<i id="nav-button" class="fa fa-2x fa-navicon"></i>
<header class="logo">
<img src="../Assets/images/logo.png" alt="">
</header>
<i id="account-control" class="fa fa-2x fa-user"></i>
</div>
<!-- Content Wrapper-->
<div class="wrapper">
<!-- Content -->
<div id="content">
</div>
<!-- Collapsible Menu -->
<div id="nav-sidebar">
<div class="nav-items">
<nav class="mainmenu">
<ul>
<li class="active"><i class="fa fa-dashboard" alt="Dashboard"></i></li>
<li><i class="fa fa-dollar" alt="Billing"></i></li>
<li><i class="fa fa-support" alt="Support"></i></li>
<li><i class="fa fa-cubes" alt="Servers"></i></li>
<li><i class="fa fa-cogs" alt="Settings"></i></li>
<li><i class="fa fa-bar-chart-o" alt="Reports"></i></li>
</ul>
</nav>
</div>
</div>
</div>
css
/* Core */
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
display: block;
font-family: "Open Sans", sans-serif;
font-size: 12px;
font-weight: 400;
line-height: 1.42857;
color: black;
background-color: white;
}
ul {
margin: 0;
padding: 0;
-webkit-margin-before: 0em;
-webkit-margin-after: 0em;
-webkit-padding-start: 0px;
}
.wrapper {
position: fixed;
width: 100%;
height: 100%;
top: 75px;
z-index: 0;
}
#content {
position: relative;
left: 0;
z-index: 0;
height: 100%;
overflow: auto;
}
/* Header */
.header {
background-color: white;
width: 100%;
height: 75px;
position: absolute;
top: 0;
z-index: 2;
box-shadow: 1px 0 1px #bdc3c7;
}
#nav-button {
color: #555c60;
position: absolute;
left: 40px;
top: 35%;
-webkit-transition: -webkit-transform 0.2s;
-moz-transition: -moz-transform 0.2s;
transition: transform 0.2s;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
font-smoothing: antialiased;
}
#nav-button.nav-button-open {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transition: -webkit-transform 0.2s;
-moz-transition: -moz-transform 0.2s;
transition: transform 0.2s;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
font-smoothing: antialiased;
}
.logo {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#account-control {
color: #555c60;
position: absolute;
right: 40px;
top: 35%;
-webkit-transition: -webkit-transform 0.2s;
-moz-transition: -moz-transform 0.2s;
transition: transform 0.2s;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
font-smoothing: antialiased;
}
/* Navigation Sidebar */
#nav-sidebar {
position: absolute;
top: 0;
left: 0;
visibility: hidden;
width: 80px;
background: none;
opacity: 1;
z-index: 1;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
transition: all 0.2s;
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
transform: translateX(-100%);
}
#nav-sidebar:after {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
content: '';
opacity: 1;
}
#nav-sidebar:before {
content: '';
height: 100%;
vertical-align: middle;
}
.nav-sidebar-open #nav-sidebar {
visibility: visible;
-webkit-transition-timing-function: ease-in-out;
-moz-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -webkit-transform;
transition-property: transform;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
transform: translateX(0);
-webkit-transition-speed: 0.2s;
-moz-transition-speed: 0.2s;
transition-speed: 0.2s;
}
.nav-sidebar-open #nav-sidebar:after {
width: 0;
height: 0;
opacity: 0;
}
.nav-items {
position: relative;
box-shadow: 1px 1px 1px #bdc3c7;
vertical-align: middle;
}
.mainmenu ul {
list-style: none;
margin: 0;
padding: 0;
}
.mainmenu ul li {
display: block;
text-align: center;
}
.mainmenu ul li a {
position: relative;
display: inline-block;
color: #555c60;
text-decoration: none;
font-size: 18px;
line-height: 80px;
height: 80px;
width: 100%;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
font-smoothing: antialiased;
-webkit-transition: background .4s ease-in-out;
-moz-transition: background .4s ease-in-out;
transition: background .4s ease-in-out;
-webkit-transition-property: color,text;
-webkit-transition-duration: .3s, .3s;
-webkit-transition-timing-function: linear, ease-in-out;
-moz-transition-property: color,text;
-moz-transition-duration: .3s;
-moz-transition-timing-function: linear, ease-in-out;
-o-transition-property: color,text;
-o-transition-duration: .3s, .3s;
-o-transition-timing-function: linear, ease-in-out;
}
.mainmenu ul li a:hover, .mainmenu ul li a:active {
background: #3498db;
color: white;
-webkit-transition: background .4s ease-in-out;
-moz-transition: background .4s ease-in-out;
transition: background .4s ease-in-out;
-webkit-transition-property: color,text;
-webkit-transition-duration: .3s, .3s;
-webkit-transition-timing-function: linear, ease-in-out;
-moz-transition-property: color,text;
-moz-transition-duration: .3s;
-moz-transition-timing-function: linear, ease-in-out;
-o-transition-property: color,text;
-o-transition-duration: .3s, .3s;
-o-transition-timing-function: linear, ease-in-out;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
font-smoothing: antialiased;
}
.mainmenu ul li a:first-child {
border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.mainmenu ul li a:last-child {
border-bottom: none;
}
.mainmenu ul li a i {
margin: 20px;
}
js
jQuery(document).ready(function($) {
/* Sidebar */
$('#nav-button').click(function() {
$('#nav-button').toggleClass('nav-button-open');
$('body').toggleClass('nav-sidebar-open');
return false;
});
});(jQuery);
P.S. (Don't be afraid of 190 lines of CSS, ~90 lines are CSS transitions that you can ignore.)
Also, here is the jsFiddle for you to play around with. Thank you so much for your help ahead of time.


I am guessing it's the panel that slides out you want to be vertically aligned to the height of the view port if the view port is 940px or wider. I was unsure about other things and so I managed to achieve this but I had to clean it up a bit. Feel free to use parts you need and discard the other. It's not ever a good idea to position:fix the wrapper, not sure why you did this. Also don't know why you had a display:block on the body.
DEMO: http://jsbin.com/zaguzo/1
Same html, same jQuery
You may also want to add a min-height, this is a demo of that: http://jsbin.com/wegow/1
The most relevant is the following but many other things need to be adjusted as well:
/* --- added --- */
#media (min-width:940px) {
#nav-sidebar {
top: 50%;
margin-top: -213px;
/*height of total of this div by 2 minus 1/2 height of header */
}
}
CSS
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body,
html {
margin: 0; /* -- added -- */
padding: 0; /* -- added -- */
}
body {
font-family: "Open Sans", sans-serif;
font-size: 12px;
font-weight: 400;
line-height: 1.42857;
color: black;
background-color: white;
}
ul {
margin: 0;
padding: 0;
}
/* -- wrapper not needed .wrapper {} -- */
#content {
position: relative;
z-index: 0;
padding:95px 20px 20px 20px;
transition: padding .5s ease-in-out;
}
.nav-sidebar-open #content {padding-left:100px;}
/* Header */
.header {
background-color: white;
height: 75px;
position: absolute;
top: 0;
z-index: 2;
box-shadow: 1px 0 1px #bdc3c7;
width: 100%;
}
#nav-button {
color: #555c60;
position: absolute;
left: 40px;
top: 35%;
-webkit-transition: -webkit-transform 0.2s;
-moz-transition: -moz-transform 0.2s;
transition: transform 0.2s;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
font-smoothing: antialiased;
}
#nav-button.nav-button-open {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
transform: rotate(90deg);
}
.logo {
position: absolute;
top: 50%;
left: 50%;
}
#account-control {
color: #555c60;
position: absolute;
right: 40px;
top: 35%;
}
/* Navigation Sidebar */
#nav-sidebar {
position: fixed;
top:75px;
left: -88px;
width: 80px;
background: none;
z-index: 1;
transition: all .5s ease-in-out;
}
.nav-sidebar-open #nav-sidebar {
left:0;
}
.nav-items {
position: relative;
box-shadow: 1px 1px 1px #bdc3c7;
}
.mainmenu ul {
list-style: none;
margin: 0;
padding: 0;
}
.mainmenu ul li {
display: block;
text-align: center;
}
.mainmenu ul li a {
position: relative;
display: block;
color: #555c60;
text-decoration: none;
font-size: 18px;
line-height: 80px;
height: 80px;
width: 100%;
background:#fff;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
/* --- added --- */
#media (min-width:940px) {
#nav-sidebar {
top: 50%;
margin-top: -213px;
/*height of total of this div by 2 minus 1/2 height of header */
}
}

Related

How can I add hamburger to my website's mobile view

I have to add a hamburger for mobile view of my website coding.
I tried with the help of w3 school but it's not working fine.
I will share my html and css code. I have added a hamburger icon just have to make it active.
Should I write code in separate JavaScript file or add any code here in my HTML?
I have tried adding hamburger from HTML CSS properties
HTML and CSS for the mobile view header:
.mobheader {
width: 80%;
height: auto;
margin: 0px auto;
display: flex;
align-items: center;
justify-content: space-between;
}
.hamburger {
font-size: 33px;
color: white;
float: left;
margin-top: 20px;
margin-bottom: 20px;
}
<div class="mobheader">
<div class="hamburger">
<i class="fas fa-bars"></i>
</div>
<div class="logo">
<h1>
<img src="img/logomob.png" alt="logo">
</h1>
</div>
<div class="dots">
<i class="fas fa-search"></i>
</div>
</div>
I want this hamburger to work in such a way it shows 3 menus on click

I can't comment, I'm not understanding what's your problem because the code you already posted works, I just changed the color and the size in the code snippet. See and if your problem is other's just clarify what's your current problem.
EDIT
I find a codepen and added to the snippet to show you what you wanted.
Source: https://codepen.io/mranenko/pen/wevamj
(function() {
var hamburger = {
navToggle: document.querySelector('.nav-toggle'),
nav: document.querySelector('nav'),
doToggle: function(e) {
e.preventDefault();
this.navToggle.classList.toggle('expanded');
this.nav.classList.toggle('expanded');
}
};
hamburger.navToggle.addEventListener('click', function(e) {
hamburger.doToggle(e);
});
}());
/* imports */
#import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro");
/* colors */
/* variables */
/* mixins */
/* resets and base styles */
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
*:focus {
outline: none;
}
html {
background: #5634d1;
color: white;
font: normal 10px/1.42857 "Source Sans Pro", Helvetica, Arial, sans-serif;
}
body {
background: none;
color: inherit;
font: inherit;
}
a {
color: inherit;
cursor: pointer;
text-decoration: none;
}
a:hover {
opacity: 0.8;
}
/* nav toggle */
.nav-toggle {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
cursor: pointer;
height: 2rem;
left: 2rem;
position: fixed;
top: 2rem;
width: 3.6rem;
z-index: 2;
}
.nav-toggle:hover {
opacity: 0.8;
}
.nav-toggle .nav-toggle-bar,
.nav-toggle .nav-toggle-bar::after,
.nav-toggle .nav-toggle-bar::before {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
background: white;
content: '';
height: 0.4rem;
width: 100%;
}
.nav-toggle .nav-toggle-bar {
margin-top: 0;
}
.nav-toggle .nav-toggle-bar::after {
margin-top: 0.8rem;
}
.nav-toggle .nav-toggle-bar::before {
margin-top: -0.8rem;
}
.nav-toggle.expanded .nav-toggle-bar {
background: transparent;
}
.nav-toggle.expanded .nav-toggle-bar::after,
.nav-toggle.expanded .nav-toggle-bar::before {
background: white;
margin-top: 0;
}
.nav-toggle.expanded .nav-toggle-bar::after {
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.nav-toggle.expanded .nav-toggle-bar::before {
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/* nav */
.nav {
-webkit-transition: left 0.5s ease;
-moz-transition: left 0.5s ease;
-ms-transition: left 0.5s ease;
-o-transition: left 0.5s ease;
transition: left 0.5s ease;
background: #28dde0;
color: white;
cursor: pointer;
font-size: 2rem;
height: 100vh;
left: -20rem;
padding: 6rem 2rem 2rem 2rem;
position: fixed;
top: 0;
width: 20rem;
z-index: 1;
}
.nav.expanded {
left: 0;
}
.nav ul {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
list-style: none;
margin: 0;
padding: 0;
}
<div class="nav-toggle">
<div class="nav-toggle-bar"></div>
</div>
<nav class="nav">
<ul>
<li>Portfolio</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>

Assuming the hamburger is an image:
<img src="img/hamburger.png" alt="hamburger"/>
You don't need the h1 tags for images, those are for headings (i.e text)
Also remember the "/" to close your img tags; your logo doesn't have one.

How to change animation position in Off-Canvas Menu Effects

I'm working with OffCanvasMenuEffects and i'm using wave menu effect. You can see this menu in following:
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}
html,
body,
.container,
.content-wrap {
overflow: hidden;
width: 100%;
height: 100%;
}
.container {
background: #373a47;
}
.menu-wrap a {
color: #b8b7ad;
}
.menu-wrap a:hover,
.menu-wrap a:focus {
color: #c94e50;
}
.content-wrap {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
.content {
position: relative;
background: #b4bad2;
}
.content::before {
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.3);
content: '';
opacity: 0;
-webkit-transform: translate3d(100%,0,0);
transform: translate3d(100%,0,0);
-webkit-transition: opacity 0.4s, -webkit-transform 0s 0.4s;
transition: opacity 0.4s, transform 0s 0.4s;
}
/* Menu Button */
.menu-button {
position: fixed;
bottom: 0;
z-index: 1000;
margin: 1em;
padding: 0;
width: 2.5em;
height: 2.25em;
border: none;
text-indent: 2.5em;
font-size: 1.5em;
color: transparent;
background: transparent;
}
.menu-button::before {
position: absolute;
top: 0.5em;
right: 0.5em;
bottom: 0.5em;
left: 0.5em;
background: linear-gradient(#373a47 20%, transparent 20%, transparent 40%, #373a47 40%, #373a47 60%, transparent 60%, transparent 80%, #373a47 80%);
content: '';
}
.menu-button:hover {
opacity: 0.6;
}
/* Close Button */
.close-button {
width: 16px;
height: 16px;
position: absolute;
right: 1em;
top: 1em;
overflow: hidden;
text-indent: 16px;
border: none;
z-index: 1001;
background: transparent;
color: transparent;
}
.close-button::before,
.close-button::after {
content: '';
position: absolute;
width: 2px;
height: 100%;
top: 0;
left: 50%;
background: #888;
}
.close-button::before {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.close-button::after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/* Menu */
.menu-wrap {
position: absolute;
bottom: 0;
left: 0;
z-index: 1001;
width: 100%;
height: 160px;
font-size: 1.15em;
-webkit-transform: translate3d(0,160px,0);
transform: translate3d(0,160px,0);
-webkit-transition: -webkit-transform 0.4s;
transition: transform 0.4s;
}
.menu {
position: absolute;
width: 100%;
z-index: 1000;
text-align: center;
top: 50%;
padding: 0 1.5em;
-webkit-transform: translate3d(0,-50%,0);
transform: translate3d(0,-50%,0);
}
.icon-list a,
.close-button {
opacity: 0;
-webkit-transform: translate3d(0,200px,0);
transform: translate3d(0,200px,0);
-webkit-transition: opacity 0.4s, -webkit-transform 0.4s;
transition: opacity 0.4s, transform 0.4s;
}
.icon-list a {
display: inline-block;
padding: 0.8em;
}
.icon-list a i {
vertical-align: middle;
}
.icon-list a span {
display: inline-block;
margin-left: 10px;
font-size: 0.75em;
vertical-align: middle;
font-weight: 700;
letter-spacing: 1px;
}
/* Morph Shape */
.morph-shape {
position: absolute;
width: 100%;
width: calc(100% + 400px);
height: 100%;
top: 0;
left: 0;
fill: #373a47;
-webkit-transition: -webkit-transform 0.4s;
transition: transform 0.4s;
-webkit-transform: translate3d(-400px,0,0);
transform: translate3d(-400px,0,0);
}
/* Shown menu */
.show-menu .menu-wrap,
.show-menu .icon-list a,
.show-menu .close-button,
.show-menu .morph-shape,
.show-menu .content::before {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.show-menu .menu-wrap,
.show-menu .content::before {
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.show-menu .icon-list a,
.show-menu .close-button,
.show-menu .content::before {
opacity: 1;
}
.show-menu .icon-list a:nth-child(2) {
-webkit-transition-delay: 0.05s;
transition-delay: 0.05s;
}
.show-menu .icon-list a:nth-child(3) {
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.show-menu .icon-list a:nth-child(4) {
-webkit-transition-delay: 0.15s;
transition-delay: 0.15s;
}
.show-menu .icon-list a:nth-child(5) {
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.show-menu .icon-list a:nth-child(6) {
-webkit-transition-delay: 0.25s;
transition-delay: 0.25s;
}
.show-menu .close-button {
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.show-menu .content::before {
-webkit-transition: opacity 0.4s;
transition: opacity 0.4s;
}
<link rel="stylesheet" type="text/css" href="https://tympanus.net/Development/OffCanvasMenuEffects/fonts/font-awesome-4.2.0/css/font-awesome.min.css" />
<script src="https://tympanus.net/Development/OffCanvasMenuEffects/js/snap.svg-min.js"></script>
<div class="menu-wrap">
<nav class="menu">
<div class="icon-list">
<i class="fa fa-fw fa-star-o"></i><span>Favorites</span>
<i class="fa fa-fw fa-bell-o"></i><span>Alerts</span>
<i class="fa fa-fw fa-envelope-o"></i><span>Messages</span>
<i class="fa fa-fw fa-comment-o"></i><span>Comments</span>
<i class="fa fa-fw fa-bar-chart-o"></i><span>Analytics</span>
<i class="fa fa-fw fa-newspaper-o"></i><span>Reading List</span>
</div>
</nav>
<button class="close-button" id="close-button">Close Menu</button>
<div class="morph-shape" id="morph-shape" data-morph-open="M0,100h1000V0c0,0-136.938,0-224,0C583,0,610.924,0,498,0C387,0,395,0,249,0C118,0,0,0,0,0V100z">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1000 100" preserveAspectRatio="none">
<path d="M0,100h1000l0,0c0,0-136.938,0-224,0c-193,0-170.235-1.256-278-35C399,34,395,0,249,0C118,0,0,100,0,100L0,100z"/>
</svg>
</div>
</div>
<button class="menu-button" id="open-button">Open Menu</button>
<script src="https://tympanus.net/Development/OffCanvasMenuEffects/js/classie.js"></script>
<script src="https://tympanus.net/Development/OffCanvasMenuEffects/js/main3.js"></script>
Currently the Menu opens from bottom to top.
My question is how is it possible to change the position of how the off canvas menu loads, default is bottom to top with wave effect convert to top to bottom, like this website: https://afriendofmine.nl
How can this be achieved?
I was tried to edit the menu but the result not good! I edit .menu-wrap class. I replace bottom: 0; with top: 0; as following:
.menu-wrap {
position: absolute;
top: 0; //edited
left: 0;
z-index: 1001;
width: 100%;
height: 160px;
font-size: 1.15em;
-webkit-transform: translate3d(0,160px,0);
transform: translate3d(0,160px,0);
-webkit-transition: -webkit-transform 0.4s;
transition: transform 0.4s;
}
After all, how can I make the menu to opens from top to bottom? like this website: https://afriendofmine.nl
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}
html,
body,
.container,
.content-wrap {
overflow: hidden;
width: 100%;
height: 100%;
}
.container {
background: #373a47;
}
.menu-wrap a {
color: #b8b7ad;
}
.menu-wrap a:hover,
.menu-wrap a:focus {
color: #c94e50;
}
.content-wrap {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
.content {
position: relative;
background: #b4bad2;
}
.content::before {
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.3);
content: '';
opacity: 0;
-webkit-transform: translate3d(100%,0,0);
transform: translate3d(100%,0,0);
-webkit-transition: opacity 0.4s, -webkit-transform 0s 0.4s;
transition: opacity 0.4s, transform 0s 0.4s;
}
/* Menu Button */
.menu-button {
position: fixed;
bottom: 0;
z-index: 1000;
margin: 1em;
padding: 0;
width: 2.5em;
height: 2.25em;
border: none;
text-indent: 2.5em;
font-size: 1.5em;
color: transparent;
background: transparent;
}
.menu-button::before {
position: absolute;
top: 0.5em;
right: 0.5em;
bottom: 0.5em;
left: 0.5em;
background: linear-gradient(#373a47 20%, transparent 20%, transparent 40%, #373a47 40%, #373a47 60%, transparent 60%, transparent 80%, #373a47 80%);
content: '';
}
.menu-button:hover {
opacity: 0.6;
}
/* Close Button */
.close-button {
width: 16px;
height: 16px;
position: absolute;
right: 1em;
top: 1em;
overflow: hidden;
text-indent: 16px;
border: none;
z-index: 1001;
background: transparent;
color: transparent;
}
.close-button::before,
.close-button::after {
content: '';
position: absolute;
width: 2px;
height: 100%;
top: 0;
left: 50%;
background: #888;
}
.close-button::before {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.close-button::after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/* Menu */
.menu-wrap {
position: absolute;
top: 0; //edited
left: 0;
z-index: 1001;
width: 100%;
height: 160px;
font-size: 1.15em;
-webkit-transform: translate3d(0,160px,0);
transform: translate3d(0,160px,0);
-webkit-transition: -webkit-transform 0.4s;
transition: transform 0.4s;
}
.menu {
position: absolute;
width: 100%;
z-index: 1000;
text-align: center;
top: 50%;
padding: 0 1.5em;
-webkit-transform: translate3d(0,-50%,0);
transform: translate3d(0,-50%,0);
}
.icon-list a,
.close-button {
opacity: 0;
-webkit-transform: translate3d(0,200px,0);
transform: translate3d(0,200px,0);
-webkit-transition: opacity 0.4s, -webkit-transform 0.4s;
transition: opacity 0.4s, transform 0.4s;
}
.icon-list a {
display: inline-block;
padding: 0.8em;
}
.icon-list a i {
vertical-align: middle;
}
.icon-list a span {
display: inline-block;
margin-left: 10px;
font-size: 0.75em;
vertical-align: middle;
font-weight: 700;
letter-spacing: 1px;
}
/* Morph Shape */
.morph-shape {
position: absolute;
width: 100%;
width: calc(100% + 400px);
height: 100%;
top: 0;
left: 0;
fill: #373a47;
-webkit-transition: -webkit-transform 0.4s;
transition: transform 0.4s;
-webkit-transform: translate3d(-400px,0,0);
transform: translate3d(-400px,0,0);
}
/* Shown menu */
.show-menu .menu-wrap,
.show-menu .icon-list a,
.show-menu .close-button,
.show-menu .morph-shape,
.show-menu .content::before {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.show-menu .menu-wrap,
.show-menu .content::before {
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.show-menu .icon-list a,
.show-menu .close-button,
.show-menu .content::before {
opacity: 1;
}
.show-menu .icon-list a:nth-child(2) {
-webkit-transition-delay: 0.05s;
transition-delay: 0.05s;
}
.show-menu .icon-list a:nth-child(3) {
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.show-menu .icon-list a:nth-child(4) {
-webkit-transition-delay: 0.15s;
transition-delay: 0.15s;
}
.show-menu .icon-list a:nth-child(5) {
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.show-menu .icon-list a:nth-child(6) {
-webkit-transition-delay: 0.25s;
transition-delay: 0.25s;
}
.show-menu .close-button {
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.show-menu .content::before {
-webkit-transition: opacity 0.4s;
transition: opacity 0.4s;
}
<link rel="stylesheet" type="text/css" href="https://tympanus.net/Development/OffCanvasMenuEffects/fonts/font-awesome-4.2.0/css/font-awesome.min.css" />
<script src="https://tympanus.net/Development/OffCanvasMenuEffects/js/snap.svg-min.js"></script>
<div class="menu-wrap">
<nav class="menu">
<div class="icon-list">
<i class="fa fa-fw fa-star-o"></i><span>Favorites</span>
<i class="fa fa-fw fa-bell-o"></i><span>Alerts</span>
<i class="fa fa-fw fa-envelope-o"></i><span>Messages</span>
<i class="fa fa-fw fa-comment-o"></i><span>Comments</span>
<i class="fa fa-fw fa-bar-chart-o"></i><span>Analytics</span>
<i class="fa fa-fw fa-newspaper-o"></i><span>Reading List</span>
</div>
</nav>
<button class="close-button" id="close-button">Close Menu</button>
<div class="morph-shape" id="morph-shape" data-morph-open="M0,100h1000V0c0,0-136.938,0-224,0C583,0,610.924,0,498,0C387,0,395,0,249,0C118,0,0,0,0,0V100z">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1000 100" preserveAspectRatio="none">
<path d="M0,100h1000l0,0c0,0-136.938,0-224,0c-193,0-170.235-1.256-278-35C399,34,395,0,249,0C118,0,0,100,0,100L0,100z"/>
</svg>
</div>
</div>
<button class="menu-button" id="open-button">Open Menu</button>
<script src="https://tympanus.net/Development/OffCanvasMenuEffects/js/classie.js"></script>
<script src="https://tympanus.net/Development/OffCanvasMenuEffects/js/main3.js"></script>

This is what you need?
.morph-shape>svg {
transform:rotate3d(1, 0, 0, 180deg);
}
https://jsfiddle.net/g4pmr6ez/1/

Popup position issues

I have a trivia game that has a popup once the question is answered. However, the popup's position is not consistent. I don't know where the problem is. I have been trying many different solutions to no avail.
html:
<div class="logo">
<img src="css/rio-40.png"/>
</div>
<div class="container" id="start">
<div class = "question"></div>
</br>
<ul id="answers">
</br>
</br>
<li class= "answer span" id= "A"></li>
<li class= "answer span" id= "B"></li>
<li class= "answer span" id= "C"></li>
</ul>
</div>
<div class="container2">
<div class="score"></div>
</div>
<div class="container3">
<div class = "right-or-wrong" style = "display:none"></div>
</br>
<div class = "next" style = "display:none">Next question!</div>
<div id="score again"></div>
</div>
<div class="cd-popup" role="alert">
<div class="cd-popup-container">
<p> OH NO! <br /> You got 0 out of 3 correct. <br /> Brush up on your trivia <br /> and play again.</p>
<ul class="cd-buttons">
<li id="reset">Play Again</li>
</ul>
</div>
</div>
<div class="cd-popup1" role="alert">
<div class="cd-popup1-container">
<img src="css/bronze-rio.png" />
<p> You got 1 out of 3 correct. </br>Good job!</p>
<ul class="cd-buttons">
<li id="reset">Play Again</li>
</ul>
</div>
</div>
<div class="cd-popup2" role="alert">
<div class="cd-popup2-container">
<img src="css/silver-rio.png" />
<p>You got 2 out of 3 correct.</br>Awesome job!</p>
<ul class="cd-buttons">
<li id="reset">Play Again</li>
</ul>
</div>
</div>
<div class="cd-popup3" role="alert">
<div class="cd-popup3-container">
<img src="css/gold-rio.png" />
<p>You got 3 out of 3 correct.</br>Perfection!</p>
<ul class="cd-buttons">
<li id="reset">Play Again</li>
</ul>
</div>
</div>
CSS:
#import url(https://fonts.googleapis.com/css?family=Slabo+27px);
body {
/*background: ("css/background.png");*/
background-color: #21509d;
text-align: center;
font-family: 'Slabo 27px', serif;
height: 600px;
}
.logo {
padding-top: 10px;
padding-bottom: 10px;
background-color: #fff;
z-index: 10;
}
h1{
color: #fff;
font-size: 40px;
font-weight: bolder;
}
.question {
font-family: 'Slabo 27px', serif;
padding-top: 50px;
vertical-align: middle;
display: inline-block;
/*height: 60px;*/
width: 75%;
color: #fff;
font-size: 60px;
font-weight: bold;
z-index: 0;
}
#answers{
text-align: center;
display: inline-block;
list-style-type: circle;
}
/*
#answers ul{
text-align: left;
display: inline-block;
list-style-type: none;
}*/
.answer{
text-align: center;
font-family: 'Slabo 27px', serif;
line-height: 60px;
font-size: 50px;
color: #fff;
cursor: pointer;
z-index: 1;
text-align: left;
}
/*span{
text-align: center;
}*/
.score {
padding-top: 40px;
font-family: 'Slabo 27px', serif;
width: 30%;
height:65px;
z-index: 0;
font-size: 60px;
/*font-weight: bold;*/
text-align: center;
display: inline-block;
}
h2{
font-family: 'Slabo 27px', serif;
font-size: 50px;
}
.container3{
text-align: center;
vertical-align: middle;
/*z-index: 10;*/
}
.right-or-wrong {
padding-top: 40px;
vertical-align: middle;
margin-left: 5%;
margin-right: 5%;
text-align: center;
height: 425px;
width: 90%;
font-family: 'Slabo 27px', serif;
background-color: #fff;
color: #21509d;
z-index: 0;
margin-top: -450px;
font-size: 40px;
font-weight: bold;
}
.next {
font-family: 'Slabo 27px', serif;
/*margin-left: 620px;*/
height: 30px;
width: 200px;
background-color: green;
color: #fff;
z-index: 11;
cursor: pointer;
padding-top: 5px;
text-align: center;
border-radius: 20px;
margin-bottom: 100px;
display: inline-block;
font-weight: bold;
}
a{
color: #fff;
text-decoration: none;
cursor: pointer;
}
.container{
/*margin-top: 50px;*/
text-align: center;
vertical-align: middle;
z-index: 0
}
.container2{
text-align: center;
vertical-align: middle;
/*z-index: 10;*/
}
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-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, main {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
html * {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.img-replace {
/* replace text with an image */
display: inline-block;
overflow: hidden;
text-indent: 100%;
color: transparent;
white-space: nowrap;
}
.cd-popup-trigger {
display: block;
width: 170px;
height: 50px;
line-height: 50px;
margin: 3em auto;
text-align: center;
color: #FFF;
font-size: 14px;
font-size: 0.875rem;
font-weight: bold;
text-transform: uppercase;
border-radius: 50em;
background: #35a785;
box-shadow: 0 3px 0 rgba(0, 0, 0, 0.07);
}
#media only screen and (min-width: 1170px) {
.cd-popup-trigger {
margin: 6em auto;
}
}
/*popup if score 0*/
.cd-popup {
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: rgba(94, 110, 141, 0.9);
opacity: 0;
visibility: hidden;
-webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s;
-moz-transition: opacity 0.3s 0s, visibility 0s 0.3s;
transition: opacity 0.3s 0s, visibility 0s 0.3s;
}
.cd-popup.is-visible {
opacity: 1;
visibility: visible;
-webkit-transition: opacity 0.3s 0s, visibility 0s 0s;
-moz-transition: opacity 0.3s 0s, visibility 0s 0s;
transition: opacity 0.3s 0s, visibility 0s 0s;
}
.cd-popup-container {
font-family: 'Slabo 27px', serif;
font-size: 27px;
position: relative;
width: 100%;
max-width: 400px;
margin: 4em auto;
background: #FFF;
border-radius: .25em .25em .4em .4em;
text-align: center;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
-webkit-transform: translateY(-40px);
-moz-transform: translateY(-40px);
-ms-transform: translateY(-40px);
-o-transform: translateY(-40px);
transform: translateY(-40px);
/* Force Hardware Acceleration in WebKit */
-webkit-backface-visibility: hidden;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s;
z-index: 05;
}
/*score 1*/
.cd-popup1 {
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: rgba(94, 110, 141, 0.9);
opacity: 0;
visibility: hidden;
-webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s;
-moz-transition: opacity 0.3s 0s, visibility 0s 0.3s;
transition: opacity 0.3s 0s, visibility 0s 0.3s;
}
.cd-popup1.is-visible {
opacity: 1;
visibility: visible;
-webkit-transition: opacity 0.3s 0s, visibility 0s 0s;
-moz-transition: opacity 0.3s 0s, visibility 0s 0s;
transition: opacity 0.3s 0s, visibility 0s 0s;
}
.cd-popup1-container {
font-family: 'Slabo 27px', serif;
font-size: 27px;
position: relative;
width: 100%;
max-width: 400px;
margin: 4em auto;
background: #FFF;
border-radius: .25em .25em .4em .4em;
text-align: center;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
-webkit-transform: translateY(-40px);
-moz-transform: translateY(-40px);
-ms-transform: translateY(-40px);
-o-transform: translateY(-40px);
transform: translateY(-40px);
/* Force Hardware Acceleration in WebKit */
-webkit-backface-visibility: hidden;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s;
z-index: 05;
}
/*score 2*/
.cd-popup2 {
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: rgba(94, 110, 141, 0.9);
opacity: 0;
visibility: hidden;
-webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s;
-moz-transition: opacity 0.3s 0s, visibility 0s 0.3s;
transition: opacity 0.3s 0s, visibility 0s 0.3s;
}
.cd-popup2.is-visible {
opacity: 1;
visibility: visible;
-webkit-transition: opacity 0.3s 0s, visibility 0s 0s;
-moz-transition: opacity 0.3s 0s, visibility 0s 0s;
transition: opacity 0.3s 0s, visibility 0s 0s;
}
.cd-popup2-container {
font-family: 'Slabo 27px', serif;
font-size: 27px;
position: relative;
width: 100%;
max-width: 400px;
margin: 4em auto;
background: #FFF;
border-radius: .25em .25em .4em .4em;
text-align: center;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
-webkit-transform: translateY(-40px);
-moz-transform: translateY(-40px);
-ms-transform: translateY(-40px);
-o-transform: translateY(-40px);
transform: translateY(-40px);
/* Force Hardware Acceleration in WebKit */
-webkit-backface-visibility: hidden;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s;
z-index: 05;
}
/*score 3 */
.cd-popup3 {
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: rgba(94, 110, 141, 0.9);
opacity: 0;
visibility: hidden;
-webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s;
-moz-transition: opacity 0.3s 0s, visibility 0s 0.3s;
transition: opacity 0.3s 0s, visibility 0s 0.3s;
}
.cd-popup3.is-visible {
opacity: 1;
visibility: visible;
-webkit-transition: opacity 0.3s 0s, visibility 0s 0s;
-moz-transition: opacity 0.3s 0s, visibility 0s 0s;
transition: opacity 0.3s 0s, visibility 0s 0s;
}
.cd-popup3-container {
font-family: 'Slabo 27px', serif;
font-size: 27px;
position: relative;
width: 100%;
max-width: 400px;
margin: 4em auto;
background: #FFF;
border-radius: .25em .25em .4em .4em;
text-align: center;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
-webkit-transform: translateY(-40px);
-moz-transform: translateY(-40px);
-ms-transform: translateY(-40px);
-o-transform: translateY(-40px);
transform: translateY(-40px);
/* Force Hardware Acceleration in WebKit */
-webkit-backface-visibility: hidden;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s;
z-index: 05;
}
.cd-popup-container p {
font-family: 'Slabo 27px', serif;
font-size: 27px;
padding: 3em 1em;
}
.cd-popup-container .cd-buttons:after {
font-family: 'Slabo 27px', serif;
content: "";
display: table;
clear: both;
}
.cd-popup-container .cd-buttons li {
font-family: 'Slabo 27px', serif;
float: left;
width: 100%;
list-style: none;
background: #F1C203;
border-bottom: .25em;
}
.cd-popup-container .cd-buttons a {
font-family: 'Slabo 27px', serif;
display: block;
height: 60px;
line-height: 60px;
text-transform: uppercase;
color: #000;
-webkit-transition: background-color 0.2s;
-moz-transition: background-color 0.2s;
transition: background-color 0.2s;
}
.cd-popup1-container .cd-buttons:after {
font-family: 'Slabo 27px', serif;
content: "";
display: table;
clear: both;
}
.cd-popup1-container .cd-buttons li {
font-family: 'Slabo 27px', serif;
width: 100%;
list-style: none;
background: #F1C203;
border-bottom: .25em;
}
.cd-popup1-container .cd-buttons a {
font-family: 'Slabo 27px', serif;
display: block;
height: 60px;
line-height: 60px;
text-transform: uppercase;
color: #000;
-webkit-transition: background-color 0.2s;
-moz-transition: background-color 0.2s;
transition: background-color 0.2s;
}
.cd-popup2-container .cd-buttons:after {
content: "";
font-family: 'Slabo 27px', serif;
display: table;
clear: both;
}
.cd-popup2-container .cd-buttons li {
font-family: 'Slabo 27px', serif;
float: left;
width: 100%;
list-style: none;
background: #F1C203;
border-bottom: .25em;
}
.cd-popup2-container .cd-buttons a {
font-family: 'Slabo 27px', serif;
display: block;
height: 60px;
line-height: 60px;
text-transform: uppercase;
color: #000;
-webkit-transition: background-color 0.2s;
-moz-transition: background-color 0.2s;
transition: background-color 0.2s;
}
.cd-popup3-container .cd-buttons:after {
font-family: 'Slabo 27px', serif;
content: "";
display: table;
clear: both;
}
.cd-popup3-container .cd-buttons li {
font-family: 'Slabo 27px', serif;
float: left;
width: 100%;
list-style: none;
background: #F1C203;
border-bottom: .25em;
}
.cd-popup3-container .cd-buttons a {
font-family: 'Slabo 27px', serif;
display: block;
height: 60px;
line-height: 60px;
text-transform: uppercase;
color: #000;
-webkit-transition: background-color 0.2s;
-moz-transition: background-color 0.2s;
transition: background-color 0.2s;
}
.cd-popup-container .cd-buttons li:first-child a {
font-family: 'Slabo 27px', serif;
background: #F1C203;
border-bottom: .25em;
}
.cd-popup1-container .cd-buttons li:first-child a {
font-family: 'Slabo 27px', serif;
background: #F1C203;
border-bottom: .25em;
}
.cd-popup2-container .cd-buttons li:first-child a {
font-family: 'Slabo 27px', serif;
background: #F1C203;
border-bottom: .25em;
}
.cd-popup3-container .cd-buttons li:first-child a {
font-family: 'Slabo 27px', serif;
background: #F1C203;
border-bottom: .25em;
}
.no-touch .cd-popup-container .cd-buttons li:first-child a:hover {
background-color: #F1C203;
}
.cd-popup-container .cd-buttons li:last-child a {
background: #F1C203;
border-bottom: .25em;
}
.no-touch .cd-popup-container .cd-buttons li:last-child a:hover {
background-color: #F1C203;
}
.cd-popup-container .cd-popup-close {
position: absolute;
top: 8px;
right: 8px;
width: 30px;
height: 30px;
}
.cd-popup-container .cd-popup-close::before, .cd-popup-container .cd-popup-close::after {
content: '';
position: absolute;
top: 12px;
width: 14px;
height: 3px;
background-color: #8f9cb5;
}
.cd-popup-container .cd-popup-close::before {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
left: 8px;
}
.cd-popup-container .cd-popup-close::after {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
right: 8px;
}
.is-visible .cd-popup-container {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
#media only screen and (min-width: 1170px) {
.cd-popup-container {
margin: 8em auto;
}
}
Here is the Codepen here
And the actual Game here

It has to do with the padding and size of the questions and answers. Try making your containers position: absolute; and the parent position: relative; so they will all be positioned in the same place.

My Pop Up Window isn't displaying right

I'm redesigning a website for fun. I have a pop up window that opens up after you click a button. However, the window and button shows up in a weird layout. The button is displayed to the far left and the text is all over the screen. You can actually see the entire code on codepen: http://codepen.io/sibraza/pen/wWgqBO
Here is the HTML:
<!--- This is what the user see when they click the button -->
<span class="msg"><button class="btn btn-danger"data-js="open">Subscribe to our Newsletter</button></span>
</section>
<!-- this is what the user sees when the popup is displayed -->
<div class="popup">
<h2>Subscribe to the Newletter:</h2>
<button name="close">Close Pop-up</button>
</div>
Here is the CSS:
button {
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
background: lightcoral;
border: 0;
border-radius: 4px;
padding: 7px 15px;
font-size: 16px;
color: #FFFFFF;
cursor: pointer;
}
button:focus {
outline: none;
}
button:hover {
background: #f39797;
}
.popup {
background: rgba(255, 255, 255, 0.8);
position: fixed;
display: none;
z-index: 5000;
height: 100%;
width: 100%;
left: 0;
top: 0;
}
.popup > div {
border-radius: 4px;
position: fixed;
background: #FFFFFF;
box-shadow: 0px 0px 12px #666666;
padding: 30px 15px;
/* Width of popup can be changed */
width: 80%;
max-width: 600px;
z-index: 5001;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
text-align: center;
}
Here is the JavaScript:
function popupOpenClose(popup) {
/* Add div inside popup for layout if one doesn't exist */
if ($(".wrapper").length == 0){
$(popup).wrapInner("<div class='wrapper'></div>");
}
/* Open popup */
$(popup).show();
/* Close popup if user clicks on background */
$(popup).click(function(e) {
if ( e.target == this ) {
if ($(popup).is(':visible')) {
$(popup).hide();
}
}
});
/* Close popup and remove errors if user clicks on cancel or close buttons */
$(popup).find("button[name=close]").on("click", function() {
if ($(".formElementError").is(':visible')) {
$(".formElementError").remove();
}
$(popup).hide();
});
}
$(document).ready(function () {
$("[data-js=open]").on("click", function() {
popupOpenClose($(".popup"));
});
});

Try this code, I have added a simple form. You can just change the css of the popup or the form as you need.
function toggleOn(){
$('body, #menu, #navbar, #content').toggleClass('on');
}
$(document).ready(function (){
$('#menu').click(function(){ toggleOn(); });
$('#content').click(function(){
if ($('#navbar').hasClass('on')) toggleOn();
});
});
//this is for the pop up
function popupOpenClose(popup) {
/* Add div inside popup for layout if one doesn't exist */
if ($(".wrapper").length == 0){
$(popup).wrapInner("<div class='wrapper'></div>");
}
/* Open popup */
$(popup).show();
/* Close popup if user clicks on background */
$(popup).click(function(e) {
if ( e.target == this ) {
if ($(popup).is(':visible')) {
$(popup).hide();
}
}
});
/* Close popup and remove errors if user clicks on cancel or close buttons */
$(popup).find("button[name=close]").on("click", function() {
if ($(".formElementError").is(':visible')) {
$(".formElementError").remove();
}
$(popup).hide();
});
}
$(document).ready(function () {
$("[data-js=open]").on("click", function() {
popupOpenClose($(".popup"));
});
});
//search bar
$(document).on('ready', function(){
var $wrap = $('[js-ui-search]');
var $close = $('[js-ui-close]');
var $input = $('[js-ui-text]');
$close.on('click', function(){
$wrap.toggleClass('open');
});
$input.on('transitionend webkitTransitionEnd oTransitionEnd', function(){
console.log('triggered end animation');
if ($wrap.hasClass('open')) {
$input.focus();
} else {
return;
}
});
});
// pop up window
body {
color: white;
font-family: 'Lato', sans-serif;
font-weight: 400;
font-size: inherit;
background: #000000;
perspective: 600px;
}
body h1, body h2 {
position: absolute;
left: 50%;
transform: translateX(-50%);
color: white;
font-family: 'Lato', sans-serif;
text-transform: uppercase;
letter-spacing: 2px;
}
body h1 {
top: 24px;
font-size: 12px;
color: #cc0000;
margin-top: 200px;
}
body h2 {
font-size: 10px;
opacity: 0.7;
color: #cc0000;
z-index: 1;
}
body .msg {
position: absolute;
display: inline-block;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
border-radius: 3px;
padding: 10px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
}
body.on {
overflow: hidden;
}
#menu {
z-index: 100;
position: fixed;
width: 40px;
height: 40px;
top: 50px;
right: 50px;
background: none;
border: none;
border-radius: 5px;
outline: none;
cursor: pointer;
transition: all 0.2s ease-in-out;
transform: rotate(-90deg);
}
#menu:hover {
background: #cc0000;
transition: all 0.2s ease-in-out;
}
#menu #line {
position: absolute;
width: 22px;
height: 2px;
left: 9px;
top: 19px;
background: white;
}
#menu #arrow {
position: absolute;
width: 6px;
height: 6px;
top: 16px;
right: 9px;
border-top: 2px solid white;
border-right: 2px solid white;
transform: rotate(45deg);
}
#menu.on {
transition: all 0.2s ease-in-out;
transform: rotate(90deg);
}
#menu.on:hover {
background: #404040;
transition: all 0.2s ease-in-out;
}
section {
position: relative;
width: 100%;
height: 450px;
padding: 1.5px 2.5px;
background: black;
transition: all 0.3s ease-in-out;
}
section.msg {
position: absolute;
opacity: 0.8;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
section.on {
box-shadow: 0 5px 20px #333333;
border-radius: 6px;
cursor: zoom-out;
transition: all 0.3s ease-in-out;
transform-origin: 50% 0;
transform: scale(0.8) translateY(100vh);
}
#navbar {
margin-top: 60px;
z-index: 90;
position: fixed;
width: 90vw;
height: 70vh;
top: 0;
left: 50%;
opacity: 0;
overflow: hidden;
transition: all 0.3s ease-in-out;
transform-origin: 50% 0;
transform: translateX(-50%) scale(0);
}
#navbar .msg {
background: #404040;
}
#navbar.on {
top: 5vh;
opacity: 1;
transition: all 0.3s ease-in-out;
transform: translateX(-50%) scale(1);
}
/* BASE
================================================================= */
html {
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
}
body {
font-family: 'Lato', sans-serif;
font-size: 18px;
line-height: 2.35;
color: #cc0000;
margin: 0;
}
p {
padding-top: 3em;
max-width: 700px;
margin: 0 auto;
}
/* DYNAMIC NAVIGATION BAR
================================================================= */
nav {
position: fixed;
width: 100%;
top: 0;
background: black;
-webkit-transition: all 650ms cubic-bezier(0.22, 1, 0.25, 1);
transition: all 650ms cubic-bezier(0.22, 1, 0.25, 1);
z-index: 1;
height: 80px;
}
nav:before {
content: "";
display: block;
position: absolute;
background: rgba(0, 0, 0, 0.27);
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
nav ul {
position: relative;
margin: 0;
z-index: 2;
text-transform: uppercase;
text-align: center;
}
nav ul li {
display: inline-block;
padding: 1.35em 0;
margin-right: 3em;
font-size: 0.9em;
}
nav ul li a {
text-decoration: none;
color: #cc0000;
font-size: 0.9em;
}
nav ul li a:hover{
color: white;
}
.edit{
margin-top: 150px;
}
.direct{
margin-top: 250px;
color: white;
}
button {
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
background: lightcoral;
border: 0;
border-radius: 4px;
padding: 7px 15px;
font-size: 16px;
color: #FFFFFF;
cursor: pointer;
}
button:focus {
outline: none;
}
button:hover {
background: #f39797;
}
.popup {
background: rgba(255, 255, 255, 0.8);
position: fixed;
display: none;
z-index: 5000;
height: 100%;
width: 100%;
left: 0;
top: 0;
}
.popup > div {
border-radius: 4px;
position: fixed;
background: #FFFFFF;
box-shadow: 0px 0px 12px #666666;
padding: 30px 15px;
/* Width of popup can be changed */
width: 80%;
max-width: 600px;
z-index: 5001;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
text-align: center;
}
.logo{
float: left;
}
.logos{
margin-top: -9px;
width: 150px;
height: 100%;
}
section.content{
margin-top: 400px;
}
.stuff{
margin-top: 100px;
height: 350px;
width: 100%;
object-fit: cover;
opacity: .4;
}
.products{
margin-left: 560px;
margin-top: 360px;
}
.footy{
color: white;
background: black;
height:140px;
width: 100%;
}
.about_info{
width: 80%;
float: left;
font-size: 14px;
margin-left: 30px;
}
.about_us{
margin-left: 30px;
}
.reach_out{
float: left;
margin-top: -90px;
margin-left: 10px;
}
.account{
margin-left:
}
.follow{
float: right;
margin-right: 30px;
display: inline-block;
}
.product_line{
height: 250px;
width: 100%;
background: white;
}
.protein{
margin-bottom: 25px;
padding-bottom: 20px;
}
.social{
float: right;
margin-top: 30px;
}
form{
width:100%;
text-align:center;
}
input[type="text"] {
-webkit-appearance: none;
outline: none;
border: none;
}
.search-wrap {
position: relative;
display: block;
z-index: 1;
width: 40px;
height: 40px;
margin-left: 0;
padding: 0;
border: 2px solid white;
border-radius: 20px;
-moz-transition: all 0.25s ease 0.3s;
-o-transition: all 0.25s ease 0.3s;
-webkit-transition: all 0.25s ease;
-webkit-transition-delay: 0.3s;
transition: all 0.25s ease 0.3s;
}
.search-wrap:before {
top: 90%;
left: 90%;
width: 16px;
height: 2px;
background-color: white;
border-radius: 1px;
-moz-transition: width 0.15s ease 0.55s;
-o-transition: width 0.15s ease 0.55s;
-webkit-transition: width 0.15s ease;
-webkit-transition-delay: 0.55s;
transition: width 0.15s ease 0.55s;
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-moz-transform-origin: top left;
-ms-transform-origin: top left;
-webkit-transform-origin: top left;
transform-origin: top left;
}
.search-wrap input {
width: 100%;
height: 100%;
padding: 0 30px 0 15px;
font-size: 14px;
line-height: 38px;
opacity: 0;
background-color: transparent;
-moz-transition: opacity 0.15s ease;
-o-transition: opacity 0.15s ease;
-webkit-transition: opacity 0.15s ease;
transition: opacity 0.15s ease;
}
.eks {
display: block;
position: absolute;
top: 50%;
right: 0;
z-index: 20;
width: 30px;
height: 30px;
cursor: pointer;
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.eks:before, .eks:after {
right: 5px;
height: 2px;
width: 2px;
border-radius: 1px;
-moz-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.eks:before {
top: 0px;
background-color: white;
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-moz-transform-origin: top right;
-ms-transform-origin: top right;
-webkit-transform-origin: top right;
transform-origin: top right;
-moz-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.eks:after {
bottom: 0px;
background-color: white;
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-moz-transform-origin: bottom right;
-ms-transform-origin: bottom right;
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.search-wrap.open {
width: 160px;
-moz-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.search-wrap.open:before {
width: 0px;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.search-wrap.open input {
opacity: 1;
-moz-transition-delay: 0.15s;
-o-transition-delay: 0.15s;
-webkit-transition-delay: 0.15s;
transition-delay: 0.15s;
}
.search-wrap.open .eks:before, .search-wrap.open .eks:after {
width: 15px;
right: 12px;
}
.search-wrap.open .eks:before {
top: 9px;
-moz-transition-delay: 0.25s;
-o-transition-delay: 0.25s;
-webkit-transition-delay: 0.25s;
transition-delay: 0.25s;
}
.search-wrap.open .eks:after {
bottom: 9px;
-moz-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.search-wrap:before, .eks:before, .eks:after {
content: "";
position: absolute;
display: block;
}
a{
color: white;
}
a:hover{
color: red;
}
.reach_out{
list-style-type: none;
}
.links{
margin-top: 30px;
margin-right: 30px;
list-style-type: none;
}
.icon-button {
background-color: white;
border-radius: 2.6rem;
cursor: pointer;
display: inline-block;
font-size: 1.3rem;
height: 2.6rem;
line-height: 2.6rem;
margin: 0 5px;
position: relative;
text-align: center;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
width: 2.6rem;
}
/* Circle */
.icon-button span {
border-radius: 0;
display: block;
height: 0;
left: 50%;
margin: 0;
position: absolute;
top: 50%;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
width: 0;
}
.icon-button:hover span {
width: 2.6rem;
height: 2.6rem;
border-radius: 2.6rem;
margin: -1.3rem;
}
/* Icons */
.icon-button i {
background: none;
color: white;
height: 2.6rem;
left: 0;
line-height: 2.6rem;
position: absolute;
top: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
width: 2.6rem;
z-index: 10;
}
.twitter span {
background-color: #4099ff;
}
.facebook span {
background-color: #3B5998;
}
.google-plus span {
background-color: #db5a3c;
}
.tumblr span {
background-color: #34526f;
}
.instagram span {
background-color: #517fa4;
}
.youtube span {
background-color: #bb0000;
}
.pinterest span {
background-color: #cb2027;
}
.icon-button .fa-twitter {
color: #4099ff;
}
.icon-button .fa-facebook {
color: #3B5998;
}
.icon-button .fa-tumblr {
color: #34526f;
}
.icon-button .fa-instagram {
color: #517fa4;
}
.icon-button .fa-youtube {
color: #bb0000;
}
.icon-button .fa-pinterest {
color: #cb2027;
}
.icon-button:hover .fa-twitter,
.icon-button:hover .fa-facebook,
.icon-button:hover .icon-google-plus,
.icon-button:hover .fa-tumblr,
.icon-button:hover .fa-instagram,
.icon-button:hover .fa-youtube,
.icon-button:hover .fa-pinterest {
color: white;
}
#media all and (max-width: 680px) {
.icon-button {
border-radius: 1.6rem;
font-size: 0.8rem;
height: 1.6rem;
line-height: 1.6rem;
width: 1.6rem;
}
.icon-button:hover span {
width: 1.6rem;
height: 1.6rem;
border-radius: 1.6rem;
margin: -0.8rem;
}
/* Icons */
.icon-button i {
height: 1.6rem;
line-height: 1.6rem;
width: 1.6rem;
}
body {
padding: 10px;
}
.pinterest {
display: none;
}
}
.wrapper {
max-width: 60rem;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 3rem;
}
.box {
width: 15rem;
height: 20rem;
padding: 0 2rem 3rem;
transition:
transform 0.3s linear 0s,
filter 0.5s linear 0.3s,
opacity 0.5s linear 0.3s;
/*transform-origin: top center;*/
}
.production {
position: relative;
width: 100%;
height: 100%;
border-radius: 0.2rem;
background-image: url(https://www.lamnia.com/images/sg-150-Shirts_and_T-Shirts.jpg);
background-color: #fff;
background-position: top 3rem center;
background-size: 80%;
background-repeat: no-repeat;
box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.1);
transition:
box-shadow 0.5s linear,
height 0.1s linear 0s;
}
.name {
display: block;
padding: 1rem 0.5rem;
}
.description {
position: absolute;
bottom: 1rem;
left: 0;
right: 0;
display: block;
padding: 0 1.5rem;
opacity: 0;
transition: opacity 0.1s linear 0s;
}
.wrapper:hover .box:not(:hover) {
filter: blur(3px);
opacity: 0.5;
}
.box:hover {
transform: scale(1.1);
transition:
transform 0.3s linear 0.3s,
filter 0.1s linear 0s,
opacity 0.1s linear 0s;
}
.box:hover .production {
height: 23rem;
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2);
transition:
box-shadow 1s linear,
height 0.3s linear 0.5s;
}
.box:hover .description {
opacity: 1;
transition: opacity 0.3s linear 0.75s;
}
form{
background: white;
text-align: center;
overflow: scroll;
padding: 0;
margin: 0;
max-height: 400px
}
/* This is for pop window */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<head>
<link rel="stylesheet" href=" https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
</head>
<button id="menu"><span id="line"></span><span id="arrow"></span></button>
<nav id="nav">
<ul>
<li class="logo"><img class="logos" src="http://res.cloudinary.com/dvrqqa6ja/image/upload/v1466803605/logo_jayvyh.png"></img></li>
<li>Home </li>
<li>Shop </li>
<li>About Us</li>
<li><div class="search-wrap" js-ui-search>
<input type="text" placeholder="Search..." / js-ui-text>
<span class="eks" js-ui-close></span>
</div> </li>
</ul>
</nav>
<aside id="navbar"><span class="msg"><iframe width="560" height="315" src="https://www.youtube.com/embed/fAE8NyE3RkA" frameborder="0" allowfullscreen></iframe></span>
</aside>
<section id="content">
<img src="http://res.cloudinary.com/dvrqqa6ja/image/upload/v1466885774/kai_di6moq.jpg"class="stuff"> </img>
<h1 class="direct"> <strong>Click the arrow to view Kai Greene's Scar Story</strong></h1>
<span class="msg"><button class="btn btn-danger"data-js="open">Subscribe to our Newsletter</button></span>
</section>
<div class="popup">
<h2>Subscribe to the Newletter:</h2><br>
<form action="#">
First name:<br>
<input type="text" name="firstname" placeholder="firstname"><br>
Last name:<br>
<input type="text" name="lastname" placeholder="lastname"><br><br>
<input type="submit" value="Submit">
</form
<center><button name="close">Close Pop-up</button></center>
</div>
<div class="product_line">
<div class="row">
<div class="col-xs-12">
<span class="products text-center">View other products</span>
</div>
</div>
<div class="row">
<div class="wrapper">
<div class="box">
<div class="production">
<span class="name"></span>
<span class="description"></span>
</div>
</div>
<div class="box">
<div class="production">
<span class="name"></span>
<span class="description"></span>
</div>
</div>
<div class="box">
<div class="production">
<span class="name"></span>
<span class="description"></span>
</div>
</div>
</div>
</div>
</div>
<footer class="footy">
<div class="container-fluid">
<hr>
<div class="row">
<div class="col-xs-4">
<h4 class="about_us">About Us </h4>
</div>
<div class="col-xs-4">
<h4 class="account text-center"> My Account </h4>
</div>
<div class="col-xs-4">
<h4 class="follow"> Follow Us </h4>
</div>
<div class="row">
<div class="col-xs-4">
<p class="about_info"> Dynamik Muscle was spawned on the creation of an idea to see a dream manifest into reality. We all sit back and dream, some even make goals and outline a plan of action, but few follow through.click to read more</p>
</div>
<div class="col-xs-4">
<ul class="links text-center">
<li> Search </li>
<li> About Us </li>
<li>Privacy Policy </li>
<li> Refund Policy </li>
<li> Shipping and Delivery </li>
<li> Ambassador Program </li>
<li> Retailers/Distributors </li>
</ul>
</div>
<div class="col-xs-4">
<ul class="social">
<i class="fa fa-twitter"></i><span></span>
<i class="fa fa-facebook"></i><span></span>
<i class="fa fa-youtube"></i><span></span>
<i class="fa fa-pinterest"></i><span></span>
</ul>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<ul class="reach_out">
<li><i class="fa fa-home" aria-hidden="true"></i> 1120 Holland Drive #20 </li>
<li><i class="fa fa-phone" aria-hidden="true"></i> Call Us at (561) 510-6765</li>
<li><i class="fa fa-envelope" aria-hidden="true"></i> cs#dynamikmuscle.com </li>
</ul>
</div>
</div>
</div>
</footer>
Here is the link to fiddle

You will need to format your
<div class="popup">
<h2>Subscribe to the Newletter:</h2><br>
<center><button name="close">Close Pop-up</button></center>
</div>
But you did not mention how do you want your popup to be displayed, i.e, center ? or anything other information. This works for me and looks good enough.

Add a feature to my image gallery that allows images to open in new window

I've built an image gallery that lets you click on a thumbnail in a grid which activates it to pop up with a larger version of the image and an image description - however what I want to do now is add the ability to click on the larger image and have it open the image in a new tab (ideally with a simple target _blank link) but I can't figure out how to add it to my current code...
If anyone could give me some advice it would be hugely appreciated! I'll attach a fiddle so you can see the code and the link to the actual page on the site I'm having trouble with!
HTML:
<div class="container">
<div class="content">
<div class="grid">
<div class="grid__item" data-size="1680x2520">
<a href="img/original/big1.jpg" class="img-wrap">
<img src="img/thumbs/big1.jpg" alt="Big 1" />
<div class="description description--grid">
<h3>Chemical Field I</h3>
<p>Chemical on Paper <em>70 x 100cm</em></p>
</div>
</a>
</div>
<div class="grid__item" data-size="1680x2520">
<a href="img/original/big2.jpg" class="img-wrap">
<img src="img/thumbs/big2.jpg" alt="Big 2" />
<div class="description description--grid">
<h3>Chemical Field II</h3>
<p>Chemical on Paper <em>70 x 100cm</em></p>
</div>
</a>
</div>
<div class="grid__item" data-size="1680x2520">
<a href="img/original/big3.jpg" class="img-wrap">
<img src="img/thumbs/big3.jpg" alt="Big 3" />
<div class="description description--grid">
<h3>Chemical Field III</h3>
<p>Chemical on Paper <em>70 x 100cm</em></p>
</div>
</a>
</div>
</div>
</div>
</div>
CSS:
.content {
margin-left: 220px;
width: calc(100%-220px);
}
.grid {
position: relative;
margin: 0;
padding-top: 7px;
}
.js .grid::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
background: #fff url(../img/loading.svg) no-repeat 50% 75px;
background-size: 60px auto;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}
.js .grid--loaded::after {
opacity: 0;
}
.grid__item {
width: 259.5px;
padding: 14px;
}
.grid__item--current {
opacity: 0 !important;
}
.img-wrap {
display: block;
}
.img-wrap:focus,
.img-wrap:hover {
outline: none;
}
.img-wrap img {
display: block;
max-width: 100%;
}
.preview {
position: fixed;
z-index: 1000;
top: 0;
left: 0;
display: -ms-flex;
display: -webkit-flex;
display: flex;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-ms-flex-line-pack: center;
-webkit-align-content: center;
align-content: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
width: 50%;
height: 100%;
pointer-events: none;
}
.preview::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
background: #fff;
-webkit-transition: opacity 0.6s;
transition: opacity 0.6s;
}
.preview--open {
pointer-events: auto;
}
.preview--open::before {
opacity: 1;
}
.clone {
position: fixed;
z-index: 110;
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
-webkit-backface-visibility: hidden;
}
.original {
position: relative;
z-index: 120;
display: block;
object-fit: contain;
-webkit-transition: opacity 0.2s;
transition: opacity 0.2s;
-webkit-backface-visibility: hidden;
}
.preview--open .animate {
/* open */
-webkit-transition: -webkit-transform 0.6s, opacity 0.2s;
transition: transform 0.6s, opacity 0.2s;
}
.animate {
/* close */
-webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
transition: transform 0.3s, opacity 0.2s;
}
.description {
color: #000;
}
.js .description--grid {
display: none;
}
.description--preview {
font-size: 1.5em;
font-family: Open Sans, sans-serif;
position: absolute;
z-index: 140;
width: 100%;
left: 100%;
top: 0;
height: 100%;
padding: 0 1em;
display: -ms-flex;
display: -webkit-flex;
display: flex;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-ms-flex-align: start;
-webkit-align-items: flex-start;
align-items: flex-start;
opacity: 0;
-webkit-transition: opacity 1s, -webkit-transform 1s;
transition: opacity 1s, transform 1s;
-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
-webkit-transform: translate3d(0, 30px, 0);
transform: translate3d(0, 30px, 0);
}
.preview--open .description--preview {
opacity: 1;
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.description--preview h3 {
font-weight: normal;
margin: 0;
}
.description--preview p {
font-size: 0.65em;
max-width: 100%;
}
.description--preview p em {
color: #5D5D5D;
display: block;
padding: 0.4em 0 0 0;
}
/* Details */
.details {
max-width: 100%;
/* IE 10-11 bug flexbox */
}
.details ul {
line-height: 1;
position: relative;
margin: 0;
padding: 0;
list-style: none;
}
.details ul li {
font-size: 0.5em;
position: relative;
display: inline-block;
margin: 0 1em 0 0;
padding: 0.15em 0;
white-space: nowrap;
opacity: 0;
color: #9d9d9d;
-webkit-transition: -webkit-transform 1s, opacity 1s;
transition: transform 1s, opacity 1s;
-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
-webkit-transform: translate3d(0, 20px, 0);
transform: translate3d(0, 20px, 0);
}
.preview--open .details ul li {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.preview--open .details ul li:nth-child(1) {
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.preview--open .details ul li:nth-child(2) {
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.preview--open .details ul li:nth-child(3) {
-webkit-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.preview--open .details ul li:nth-child(4) {
-webkit-transition-delay: 0.5s;
transition-delay: 0.5s;
}
.preview--open .details ul li:nth-child(5) {
-webkit-transition-delay: 0.6s;
transition-delay: 0.6s;
}
.details ul li:first-child {
font-weight: bold;
color: #909090;
}
.icon {
font-family: 'camera-icons';
font-weight: normal;
font-style: normal;
font-variant: normal;
line-height: 1;
display: inline-block;
vertical-align: middle;
text-transform: none;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
speak: none;
}
.icon + span {
margin-left: 5px;
vertical-align: middle;
}
.icon-focal_length:before {
content: '\e600';
}
.icon-exposure_time:before {
content: '\e601';
}
.icon-iso:before {
content: '\e602';
}
.icon-camera:before {
content: '\e603';
}
.icon-aperture:before {
content: '\e604';
}
.details .icon {
margin-right: 5px;
color: #000;
}
/* Close button */
.action {
font-size: 1.5em;
margin: 0;
padding: 0;
cursor: pointer;
vertical-align: top;
color: #000;
border: none;
background: none;
}
.action:hover,
.action:focus {
color: #CCC;
outline: none;
}
.action--close {
position: fixed;
z-index: 150;
top: 0;
right: 0;
padding: 1em;
opacity: 0;
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
-webkit-transform: scale3d(0.6, 0.6, 1);
transform: scale3d(0.6, 0.6, 1);
}
.preview--image-loaded .action--close {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
.text-hidden {
position: absolute;
display: block;
overflow: hidden;
width: 0;
height: 0;
color: transparent;
}
http://benedictbuckle.co.za/chemical-works.html
https://jsfiddle.net/1r6br1th/
Any help would be hugely appreciated!

Just added target="_blank" to the first a tag and it worked.
<a href="http://benedictbuckle.co.za/img/original/big1.jpg" class="img-wrap" target="_blank">
<img src="http://benedictbuckle.co.za/img/thumbs/big1.jpg" alt="Big 1" />
<div class="description description--grid">
<h3>Chemical Field I</h3>
<p>Chemical on Paper <em>70 x 100cm</em></p>
</div>
</a>
Click the first image: https://jsfiddle.net/1r6br1th/1/

Categories

Resources