I am setting up my new menu for mobile devices. Everything is set fine but after I click on any menu item it does not close the menu and menu overlay.
Any ideas how to fix this?
I am providing my CSS and HTML code bellow.
CSS
margin-bottom:-7em;
}
#keyframes bugfix {
from {
padding: 0;
}
to {
padding: 0;
}
}
#-webkit-keyframes bugfix {
from {
padding: 0;
}
to {
padding: 0;
}
}
#overlay-button {
position: absolute;
right: 2em;
top: 3em;
padding: 26px 11px;
z-index: 5;
cursor: pointer;
user-select: none;
}
#overlay-button span {
height: 4px;
width: 35px;
border-radius: 2px;
background-color: white;
position: relative;
display: block;
transition: all 0.2s ease-in-out;
}
#overlay-button span:before {
top: -10px;
visibility: visible;
}
#overlay-button span:after {
top: 10px;
}
#overlay-button span:before, #overlay-button span:after {
height: 4px;
width: 35px;
border-radius: 2px;
background-color: white;
position: absolute;
content: "";
transition: all 0.2s ease-in-out;
}
#overlay-button:hover span, #overlay-button:hover span:before, #overlay-button:hover span:after {
background: #fff;
}
input[type="checkbox"] {
display: none;
}
input[type="checkbox"]:checked ~ #overlay {
visibility: visible;
}
input[type="checkbox"]:checked ~ #overlay-button:hover span,
input[type="checkbox"]:checked ~ #overlay-button span {
background: transparent;
}
input[type="checkbox"]:checked ~ #overlay-button span:before {
transform: rotate(45deg) translate(7px, 7px);
opacity: 1;
}
input[type="checkbox"]:checked ~ #overlay-button span:after {
transform: rotate(-45deg) translate(7px, -7px);
}
#overlay {
height: 190vh;
width: 100%;
background: #ec6451;
z-index: 2;
visibility: hidden;
position: fixed;
left:0;
top:0px;
}
#overlay.active {
visibility: visible;
}
#overlay ul {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
text-align: center;
height: 100vh;
padding-left: 0;
list-style: none!important;
}
#overlay ul li {
padding: 1em;
list-style: none;
margin-left:-4%;
}
#overlay ul li a {
color: white;
text-decoration: none;
font-size: 1.5em;
}
#overlay ul li a:hover {
color: #333332;
}
#overlay ul li a:click {
display:none;
background-color:transparent;
}
HTML
<body>
<input type="checkbox" id="overlay-input" />
<label for="overlay-input" id="overlay-button"><span></span></label>
<div id="overlay" >
<center> <img src="/wp-content/uploads/2019/06/logo-copy.png" class="logo-up" alt="Trulli" width="250" height=auto></center>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</body>
Please tak a look at my problem. Thank you for every answer.
This code has been tested on tablets, not mobile devices yet.
First of all I need the solution for my problem.
u must put onclick action for closing the hover
Related
I've found this great responsive CSS Navigation: Navigation at codepen
how can i add a fully background only in mobile view? i tried to style the "ul-element" but it doesn't work.
.header .menu {
background-color:red;
}
it should like this:
the "X" icon is ok, i only need a full background. i tried to add a "div-element" between header and the menu-part. but this also not work.
any idea? how i can add this, without "bigger changes", the navigation is "perfect" for me. i favourite small and clean solutions.
thank you!
try this
Working Demo
body {
margin: 0;
font-family: Helvetica, sans-serif;
background-color: #f4f4f4;
}
a {
color: #000;
}
/* header */
.header {
background-color: #fff;
box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
position: fixed;
width: 100%;
z-index: 3;
}
.header ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-color: #fff;
}
.header li a {
display: block;
padding: 20px 20px;
border-right: 1px solid #f4f4f4;
text-decoration: none;
}
.header li a:hover,
.header .menu-btn:hover {
background-color: #f4f4f4;
}
.header .logo {
display: block;
float: left;
font-size: 2em;
padding: 10px 20px;
text-decoration: none;
}
/* menu */
.header .menu {
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
}
/* menu icon */
.header .menu-icon {
cursor: pointer;
display: inline-block;
float: right;
padding: 28px 20px;
position: relative;
user-select: none;
}
.header .menu-icon .navicon {
background: #333;
display: block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
}
.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
background: #333;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.header .menu-icon .navicon:before {
top: 5px;
}
.header .menu-icon .navicon:after {
top: -5px;
}
/* menu btn */
.header .menu-btn {
display: none;
}
.header .menu-btn:checked ~ .menu {
max-height: 240px;
}
.header .menu-btn:checked ~ .menu-icon .navicon {
background: transparent;
}
.header .menu-btn:checked ~ .menu-icon .navicon:before {
transform: rotate(-45deg);
}
.header .menu-btn:checked ~ .menu-icon .navicon:after {
transform: rotate(45deg);
}
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
top: 0;
}
/* 48em = 768px */
#media (min-width: 48em) {
.header li {
float: left;
}
.header li a {
padding: 20px 30px;
}
.header .menu {
clear: none;
float: right;
max-height: none;
}
.header .menu-icon {
display: none;
}
}
#media only screen and (max-width: 48em) {
body,.header .menu{background:#2f66fe;}
.header li a {border-right:none;}
}
<header class="header">
CSS Nav
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn">
<span class="navicon"></span>
</label>
<ul class="menu">
<li>Our Work</li>
<li>About</li>
<li>Careers</li>
<li>Contact</li>
</ul>
</header>
see image of working code hereUse after or before property to give the complete background in media query. There is some parent div. You can make it relative and then
div:after {
content:"";
position:absolute;
left: 0;
right:0;
margin: 0 auto;
width: 100%;
height: 100vh;
background: blue;
}
After this make the z-index of nav elements greater else they won't be clickable.
I'm in need of some web dev help.
i've created a responsive navbar and it works pretty well except on 2 occasions. I'll only mention the first problem for now though.
so the problem is i have 4 options in my navbar (might need to add another one later), and it shows normally when the browser is over 62 em but once under it turns into a drop down menu. It works... although it only shows 3 of the four options and i have no idea what m doing wrong. i've listed the code below for you guys to have a look at.
thank you :)
.header {
background-color: #1B1B1B;
box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
position: fixed;
width: 100%;
z-index: 3;
top:0;
}
.header ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-color: #1B1B1B;
}
.header li a {
display: block;
padding: 20px 20px;
border-right: 1px solid #1B1B1B;
text-decoration: none;
}
.header li a:hover,
.header .menu-btn:hover {
background-color: #1B1B1B;
}
.header .logo {
display: block;
float: left;
font-size: 1.5em;
padding: 10px 20px;
text-decoration: none;
}
/* navbar */
.header .menu {
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
}
/* menu icon */
.header .menu-icon {
cursor: pointer;
float: right;
padding: 28px 20px;
position: relative;
user-select: none;
}
.header .menu-icon .nav-icon {
background: #333;
display: block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
}
.header .menu-icon .nav-icon:before,
.header .menu-icon .nav-icon:after {
background: #333;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.header .menu-icon .nav-icon:before {
top: 0;
}
.header .menu-icon .nav-icon:after {
top: 0;
}
/* menu button */
.header .menu-btn {
display: none;
}
.header .menu-btn:checked ~ .menu {
max-height: 240px;
}
.header .menu-btn:checked ~ .menu-icon .nav-icon {
background: transparent;
}
.header .menu-btn:checked ~ .menu-icon .nav-icon:before {
transform: rotate(-45deg);
top:0;
}
.header .menu-btn:checked ~ .menu-icon .nav-icon:after {
transform: rotate(45deg);
top:0;
}
/* media query for navbar */
#media (min-width: 62em) {
.header li {
float: left;
}
.header li a {
padding: 20px 60px;
}
.header .menu {
clear: none;
float: right;
max-height: none;
}
.header .menu-icon {
display: none;
}
}
<header class="header">
Introspect
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"><span class="nav-icon"></span></label>
<ul class="menu">
<li>HOME</li>
<li>PLANS</li>
<li>ABOUT</li>
<li>ENQUIRE</li>
</ul>
</header>
EDIT:
https://codepen.io/exoticpenguins/pen/PoqvgyJ
ive uploaded my page to codepen. check it out there :)
Your max-height is causing the last element to be clipped. Increasing that will show it.
.header .menu-btn:checked ~ .menu {
max-height: 240px;
}
Try using your browser developer tools to inspect the elements, it's a good way to see this.
I have this navbar setup on my page, I would like for it to work as normal on a tablet or desktop and then when loaded on a mobile device for the navbar to be condesnsed into a pressable hamburger menu.
What would be the best way to tackle this?
HTML and CSS Code are as follows
HTML
<h1 class='logo'><a href='#'>Website Logo</a></h1>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Blog</li>
<li>Portfolio</li>
</ul>
</nav>
</header>
CSS
header{
display: flex;
justify-content: space-around;
width: 100%;
background: #616880;
height: 70px;
}
.sticky {
position: fixed;
top:0;
width: 100%;
}
.logo{
margin: 15px 0 0 0;
}
nav {
margin: 25px;
}
ul li{
list-style: none;
display: inline;
}
ul li a,
h1 a{
text-decoration: none;
color: #fff;
padding: 5px;
}
Solution 1 Using pure CSS
body {
margin: 0;
font-family: Helvetica, sans-serif;
background-color: #f4f4f4;
}
a {
color: #000;
}
/* header */
.header {
background-color: #fff;
box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
position: fixed;
width: 100%;
z-index: 3;
}
.header ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-color: #fff;
}
.header li a {
display: block;
padding: 20px 20px;
border-right: 1px solid #f4f4f4;
text-decoration: none;
}
.header li a:hover,
.header .menu-btn:hover {
background-color: #f4f4f4;
}
.header .logo {
display: block;
float: left;
font-size: 2em;
padding: 10px 20px;
text-decoration: none;
}
/* menu */
.header .menu {
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
}
/* menu icon */
.header .menu-icon {
cursor: pointer;
display: inline-block;
float: right;
padding: 28px 20px;
position: relative;
user-select: none;
}
.header .menu-icon .navicon {
background: #333;
display: block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
}
.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
background: #333;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.header .menu-icon .navicon:before {
top: 5px;
}
.header .menu-icon .navicon:after {
top: -5px;
}
/* menu btn */
.header .menu-btn {
display: none;
}
.header .menu-btn:checked ~ .menu {
max-height: 240px;
}
.header .menu-btn:checked ~ .menu-icon .navicon {
background: transparent;
}
.header .menu-btn:checked ~ .menu-icon .navicon:before {
transform: rotate(-45deg);
}
.header .menu-btn:checked ~ .menu-icon .navicon:after {
transform: rotate(45deg);
}
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
top: 0;
}
/* 48em = 768px */
#media (min-width: 48em) {
.header li {
float: left;
}
.header li a {
padding: 20px 30px;
}
.header .menu {
clear: none;
float: right;
max-height: none;
}
.header .menu-icon {
display: none;
}
}
<header class="header">
Your Logo
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Blog</li>
<li>Portfolio</li>
</ul>
</header>
Solution 2 Using JS and CSS
(function($) { // Begin jQuery
$(function() { // DOM ready
// If a link has a dropdown, add sub menu toggle.
$('nav ul li a:not(:only-child)').click(function(e) {
$(this).siblings('.nav-dropdown').toggle();
// Close one dropdown when selecting another
$('.nav-dropdown').not($(this).siblings()).hide();
e.stopPropagation();
});
// Clicking away from dropdown will remove the dropdown class
$('html').click(function() {
$('.nav-dropdown').hide();
});
// Toggle open and close nav styles on click
$('#nav-toggle').click(function() {
$('nav ul').slideToggle();
});
// Hamburger to X toggle
$('#nav-toggle').on('click', function() {
this.classList.toggle('active');
});
}); // end DOM ready
})(jQuery); // end jQuery
#charset "UTF-8";
body{
margin:0;
}
.navigation {
height: 70px;
background: #6d7993;
font-family: montserrat, sans-serif;
font-weight: 400;
font-style: normal;
opacity: 0.88;
}
.brand {
position: absolute;
padding-left: 20px;
float: left;
line-height: 70px;
text-transform: uppercase;
font-size: 1.4em;
}
.brand a,
.brand a:visited {
color: #ffffff;
text-decoration: none;
}
.nav-container {
max-width: 1000px;
margin: 0 auto;
}
nav {
float: right;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
float: left;
position: relative;
}
nav ul li a,
nav ul li a:visited {
display: block;
padding: 0 20px;
line-height: 70px;
background: #6d7993;
color: #ffffff;
text-decoration: none;
}
nav ul li a:hover,
nav ul li a:visited:hover {
background: #4b5569;
color: #ffffff;
}
nav ul li a:not(:only-child):after,
nav ul li a:visited:not(:only-child):after {
padding-left: 4px;
content: " ▾";
}
nav ul li ul li {
min-width: 190px;
}
nav ul li ul li a {
padding: 15px;
line-height: 20px;
}
.nav-dropdown {
position: absolute;
display: none;
z-index: 1;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}
/* Mobile navigation */
.nav-mobile {
display: none;
position: absolute;
top: 0;
right: 0;
background: #6d7993;
height: 70px;
width: 70px;
}
#media only screen and (max-width: 798px) {
.nav-mobile {
display: block;
}
nav {
width: 100%;
padding: 70px 0 15px;
}
nav ul {
display: none;
}
nav ul li {
float: none;
}
nav ul li a {
padding: 15px;
line-height: 20px;
}
nav ul li ul li a {
padding-left: 30px;
}
.nav-dropdown {
position: static;
}
}
#media screen and (min-width: 799px) {
.nav-list {
display: block !important;
}
}
#nav-toggle {
position: absolute;
left: 18px;
top: 22px;
cursor: pointer;
padding: 10px 35px 16px 0px;
}
#nav-toggle span,
#nav-toggle span:before,
#nav-toggle span:after {
cursor: pointer;
border-radius: 1px;
height: 5px;
width: 35px;
background: #ffffff;
position: absolute;
display: block;
content: "";
transition: all 300ms ease-in-out;
}
#nav-toggle span:before {
top: -10px;
}
#nav-toggle span:after {
bottom: -10px;
}
#nav-toggle.active span {
background-color: transparent;
}
#nav-toggle.active span:before, #nav-toggle.active span:after {
top: 0;
}
#nav-toggle.active span:before {
transform: rotate(45deg);
}
#nav-toggle.active span:after {
transform: rotate(-45deg);
}
article {
max-width: 1000px;
margin: 0 auto;
padding: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<section class="navigation">
<div class="nav-container">
<div class="brand">
Eric Samson
</div>
<nav>
<div class="nav-mobile"><a id="nav-toggle" href="#!"><span></span></a></div>
<ul class="nav-list">
<li>
GIS Projects
</li>
<li>
R Studio
</li>
<li>
Contact
</li>
</ul>
</ul>
</nav>
</div>
</section>
NOTE: View Snippet in full screen
You can use javascript. For better understanding, you can look at this link: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_topnav Also you can use jquery too.
My header css is giving me pain. It's effecting what comes after it. I just want to put 3 links/button in center of the content. But when I try to make it. Not working properly. p tag or h1 tags doesn't matter, Always stuck behind the header. I used clear fix but not quite working. I am not sure why next div stuck behind the header. And also when I try to give css to a tag which is inside row div. It doesn't take effect too.
body {
margin: 0;
font-family: Helvetica, sans-serif;
background-color: #f4f4f4;
}
a {
color: #000;
}
/* header */
.header {
background-color: #fff;
box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
position: fixed;
width: 100%;
}
.header ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-color: #fff;
}
.header li a {
display: block;
padding: 20px 20px;
border-right: 1px solid #f4f4f4;
text-decoration: none;
}
.header li a:hover,
.header .menu-btn:hover {
background-color: #f4f4f4;
}
.header .logo {
display: block;
float: left;
font-size: 2em;
padding: 10px 20px;
text-decoration: none;
}
/* menu */
.header .menu {
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
}
/* menu icon */
.header .menu-icon {
cursor: pointer;
display: inline-block;
float: right;
padding: 28px 20px;
position: relative;
user-select: none;
}
.header .menu-icon .navicon {
background: #333;
display: block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
}
.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
background: #333;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.header .menu-icon .navicon:before {
top: 5px;
}
.header .menu-icon .navicon:after {
top: -5px;
}
/* menu btn */
.header .menu-btn {
display: none;
}
.header .menu-btn:checked ~ .menu {
max-height: 240px;
}
.header .menu-btn:checked ~ .menu-icon .navicon {
background: transparent;
}
.header .menu-btn:checked ~ .menu-icon .navicon:before {
transform: rotate(-45deg);
}
.header .menu-btn:checked ~ .menu-icon .navicon:after {
transform: rotate(45deg);
}
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
top: 0;
}
html {
font-family: Helvetica Neue;
}
.clearfix:after {
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
.row {
margin: auto;
text-align: center;
width: 85%;
color: black;
}
.button a:link {
text-decoration: none;
background-color: black;
border: 1px solid red;
padding: 15px;
}
a:visited {
text-decoration: none !important;
}
/* 48em = 768px */
#media (min-width: 48em) {
.header li {
float: left;
}
.header li a {
padding: 20px 30px;
}
.header .menu {
clear: none;
float: right;
max-height: none;
}
.header .menu-icon {
display: none;
}
}
<header class="header">
GO
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
<ul class="menu">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</header>
<div class="clearfix"></div>
<div class="row">
Click
</div>
Any idea why this happening?
Add padding-top to your body and stick the header to top with top: 0;.
See below:
body {
margin: 0;
font-family: Helvetica, sans-serif;
background-color: #f4f4f4;
padding-top: 80px; /* added padding-top */
}
a {
color: #000;
}
.header {
background-color: #fff;
box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
position: fixed;
width: 100%;
top: 0; /* stick to top */
}
.header ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-color: #fff;
}
.header li a {
display: block;
padding: 20px 20px;
border-right: 1px solid #f4f4f4;
text-decoration: none;
}
.header li a:hover,
.header .menu-btn:hover {
background-color: #f4f4f4;
}
.header .logo {
display: block;
float: left;
font-size: 2em;
padding: 10px 20px;
text-decoration: none;
}
/* menu */
.header .menu {
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
}
/* menu icon */
.header .menu-icon {
cursor: pointer;
display: inline-block;
float: right;
padding: 28px 20px;
position: relative;
user-select: none;
}
.header .menu-icon .navicon {
background: #333;
display: block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
}
.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
background: #333;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.header .menu-icon .navicon:before {
top: 5px;
}
.header .menu-icon .navicon:after {
top: -5px;
}
/* menu btn */
.header .menu-btn {
display: none;
}
.header .menu-btn:checked ~ .menu {
max-height: 240px;
}
.header .menu-btn:checked ~ .menu-icon .navicon {
background: transparent;
}
.header .menu-btn:checked ~ .menu-icon .navicon:before {
transform: rotate(-45deg);
}
.header .menu-btn:checked ~ .menu-icon .navicon:after {
transform: rotate(45deg);
}
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
top: 0;
}
html {
font-family: Helvetica Neue;
}
.clearfix:after {
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
.row {
margin: auto;
text-align: center;
width: 85%;
color: black;
}
.button:link {
text-decoration: none;
background-color: black;
border: 1px solid red;
padding: 15px;
color: white; /* added for demonstration */
}
a:visited {
text-decoration: none !important;
}
/* 48em = 768px */
#media (min-width: 48em) {
.header li {
float: left;
}
.header li a {
padding: 20px 30px;
}
.header .menu {
clear: none;
float: right;
max-height: none;
}
.header .menu-icon {
display: none;
}
}
<header class="header">
Reactive Design
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
<ul class="menu">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</header>
<div class="clearfix"></div>
<div class="row">
Click
</div>
Seems like you are trying to make the header always stay on top of the page (even when scrolled down) so you have added position: fixed in its CSS. This style makes all the other content start from the top of the page, rather than below the header. So you can either give some margin-top: 80px to the div below it or you can give padding-top: 100px to body and top: 0 to header.
If you don't want the header to stay on top of the page while you scroll down. Then #Ana Liza Pandac answer seems a good approach.
Currently the bottom-right menu on my website moves up when you click a menu item: http://www.jameswinfield.co.uk/v2.html
How do I get the menu itself to stay where it is and the menu items to display upwards?
My CSS is below:
.menu4 {
position: fixed;
z-index: 9999;
margin-top: 0px;
}
.menu4 nav {
-webkit-opacity: 0;
-moz-opacity: 0;
-ms-opacity: 0;
-o-opacity: 0;
opacity: 0;
}
.menu4 input#slide4:checked ~ nav {
-webkit-opacity: 1;
-moz-opacity: 1;
-ms-opacity: 1;
-o-opacity: 1;
opacity: 1;
}
.menu4 label {
position: fixed;
font-size: 50px;
cursor: pointer;
z-index: 9999;
}
.menu4 input#slide4 {
display: none;
}
.menu4 input#slide4:checked ~ label.open i {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.menu4 label i,
.menu4 nav,
.menu4 nav ul li a span {
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.menu4 label,
.menu4 nav ul li a i,
.menu4 nav ul li a span {
line-height: 120px;
text-align: center;
width: 120px;
height: 120px;
}
.menu4 nav ul {
list-style: none;
overflow: hidden;
}
.menu4 nav ul li a i {
font-size: 30px;
}
.menu4 nav ul li a span {
font-family: 'Lato', tahoma, sans-serif;
font-size: 17.14285714px;
text-transform: uppercase;
width: 0;
}
.menu4 nav ul li a:hover span {
width: 100px;
padding: 0 10px;
}
.menu4 nav ul li.active a span {
width: 100px;
padding: 0 10px;
}
.menu4.top {
bottom: 0px;
}
.menu4.bottom {
bottom: 0px;
}
.menu4.left,
.menu4.left label {
right: 0;
}
.menu4.right,
.menu4.right label {
right: 0;
}
.menu4.horizontal nav ul li,
.menu4.horizontal nav ul li a span {
float: left;
}
.menu4.left.horizontal nav {
margin-right: -50px;
}
.menu4.left.horizontal input#slide4:checked ~ nav {
margin-right: 120px;
}
.menu4.right.horizontal nav {
margin-right: -60px;
}
.menu4.right.horizontal input#slide4:checked ~ nav {
margin-right: 60px;
}
.menu4.blue label,
.menu4.blue nav ul li a ul li i {
color: #F82D27;
}
.menu4.blue nav ul li a span {
color: #F235E9;
}
.mixcloud {
display: none;
opacity: 0.7;
margin-left: 10px;
}
.youtube {
display: none;
opacity: 0.7;
}
The menu slides upwards from outside of the viewport, so position: fixed is a good choice here.
The menu container is also given position: fixed and it will remain fixed in place, relevant to the viewport.
Example
This is using :hover to simplify things, but can easily be adapted.
nav {
position: fixed;
bottom: 0;
left: 20px;
padding: 30px;
z-index: 2;
}
nav > a {
background: #F90;
padding: 20px;
color: #000;
}
.slideUp {
bottom: -400px;
left: 20px;
height: 400px;
width: 500px;
background: #F00;
position: fixed;
transition: bottom .3s linear;
z-index: 1;
}
nav:hover + .slideUp,
.slideUp:hover {
bottom: 80px;
}
<nav>
I am a menu item, hover me please
</nav>
<div class="slideUp"></div>