I want to have the icon for the login be clickable and over the "LOGIN" Text centered. Furthermore I want that on the navbar/sidebar all images/icons are always in a pair with the text that belongs to it, like "LOGIN" and the login icon over it or with the registration. If you find ways to fix it & find ways how to fix my code to make it more efficient, I will be very pleased. Any suggestions? I hope smb can help, thanks!
body{
margin: 0 auto;
background: #fff;
}
a.nounderline{
text-decoration: none;
outline: none;
color: #1478a0;
font-size: 16px;
font-family: 'Alef', sans-serif;
}
a.nounderline span{
color: #ffffff;
}
div.container{
text-align: center;
box-sizing: border-box;
margin: 0 auto;
padding: 8px;
background-color: #000000;
}
.floating-menu{
margin: 0 auto;
right: 25px;
position: fixed;
font-family: 'Changa One', cursive;
font-size: 16px;
top:50%;
-webkit-transform:translateY(-50%);
-ms-transform:translateY(-50%);
transform:translateY(-50%);
height: 42%;
}
.absoluteCenterWrapper {
position:relative;
}
.absoluteCenter {
margin:auto;
position:absolute;
top:0;
bottom:0;
}
.absoluteCenter {
max-height:100%;
max-width:100%;
}
a.new_paragraph span {
line-height: 0em;
display: block;
}
.main-menu{
margin: 0;
padding: 0;
top: 10px;
bottom: 10px;
list-style: none;
}.main-menu li a{
text-align: center;
text-decoration: none;
outline: none;
line-height: 3em;
display: block;
padding: 10px;
color: #fff;
border-radius: auto;
position: relative;
top: 36px;
-webkit-transition: none;
-o-transition: none;
transition: none;
}
.main-menu li a:hover{
color: #1478a0;
}
.menu-bg{
background: blue;
position: absolute;
width: 100%;
height: 100%;
border-radius:55px;
z-index: -1;
top: 0;
left: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="Access Denied">
<meta name="author" content="AccessDenied">
<meta name="keywords" content="Social Media">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AccessDenied</title>
<link href="https://fonts.googleapis.com/css2?family=Changa+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Teko:wght#600&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Alef:wght#700&display=swap" rel="stylesheet">
<link href="css/style.css" rel="stylesheet" type="text/css">
<style type="text/css">
</style>
</head>
<body>
<header>
<div class="container">
ACCESS<span>DENIED</span>
</div>
</header>
<main>
<aside>
</aside>
</main>
<sidebar>
<nav class="floating-menu">
<ul class="main-menu">
<li>
<a href="https://www.google.com" class="absoluteCenterWrapper">
<img src="http://cdn.onlinewebfonts.com/svg/img_311846.png" class="absoluteCenter">
<span>LOGIN</span>
</a>
</li>
<li>
<a href="#" >REGISTER</a>
</li>
<li>
<a href="#" class="new_paragraph" >GET<span>PREMIUM</span></a>
</li>
<li>
</li>
</ul>
<div class="menu-bg"></div>
</nav>
</sidebar>
<footer>
</footer>
</body>
</html>
Is this what you're looking for?
I changed the link label from <span> into <div> and added .icon class.
body{
margin: 0 auto;
background: #fff;
}
a.nounderline{
text-decoration: none;
outline: none;
color: #1478a0;
font-size: 16px;
font-family: 'Alef', sans-serif;
}
a.nounderline span{
color: #ffffff;
}
div.container{
text-align: center;
box-sizing: border-box;
margin: 0 auto;
padding: 8px;
background-color: #000000;
}
.floating-menu{
margin: 0 auto;
right: 25px;
position: fixed;
font-family: 'Changa One', cursive;
font-size: 16px;
top:50%;
-webkit-transform:translateY(-50%);
-ms-transform:translateY(-50%);
transform:translateY(-50%);
height: 42%;
}
.absoluteCenterWrapper {
position:relative;
}
.absoluteCenter {
margin:auto;
position:absolute;
top:0;
bottom:0;
}
.absoluteCenter {
max-height:100%;
max-width:100%;
}
a.new_paragraph span {
line-height: 0em;
display: block;
}
.main-menu{
margin: 0;
padding: 0;
top: 10px;
bottom: 10px;
list-style: none;
}
.main-menu li a{
text-align: center;
text-decoration: none;
outline: none;
line-height: 3em;
display: block;
padding: 10px;
color: #fff;
border-radius: auto;
position: relative;
top: 36px;
-webkit-transition: none;
-o-transition: none;
transition: none;
}
.main-menu li a:hover{
color: #1478a0;
}
.menu-bg{
background: blue;
position: absolute;
width: 100%;
height: 100%;
border-radius:55px;
z-index: -1;
top: 0;
left: 0;
}
.icon {
width: 32px;
height: 32px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="Access Denied">
<meta name="author" content="AccessDenied">
<meta name="keywords" content="Social Media">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AccessDenied</title>
<link href="https://fonts.googleapis.com/css2?family=Changa+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Teko:wght#600&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Alef:wght#700&display=swap" rel="stylesheet">
<link href="css/style.css" rel="stylesheet" type="text/css">
<style type="text/css">
</style>
</head>
<body>
<header>
<div class="container">
ACCESS<span>DENIED</span>
</div>
</header>
<main>
<aside>
</aside>
</main>
<sidebar>
<nav class="floating-menu">
<ul class="main-menu">
<li>
<a href="https://www.google.com" class="absoluteCenterWrapper">
<img class="icon" src="http://cdn.onlinewebfonts.com/svg/img_311846.png" class="absoluteCenter">
<div>LOGIN</div>
</a>
</li>
</ul>
<div class="menu-bg"></div>
</nav>
</sidebar>
<footer>
</footer>
</body>
</html>
html,
body {
width: 100%;
height: 100%;
position: relative;
}
nav {
background: blue;
position: absolute;
padding: 30px 10px;
border-radius: 50px;
top: 50%;
transform: translateY(-50%);
left: 20px;
}
nav ul {
list-style: none;
padding: 0;
}
nav ul li a {
display: flex;
align-items: center;
text-decoration: none;
margin: 0 0 20px 0;
}
nav ul li a img {
width: 30px;
height: 30px;
object-fit: contain;
}
nav ul li span {
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
margin-left: 10px;
color: #000;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<nav>
<ul>
<li>
<a href="https://www.google.com">
<img src="https://cdn.onlinewebfonts.com/svg/img_311846.png" />
<span>LOGIN</span>
</a>
</li>
<li>
<a href="https://www.google.com">
<img src="https://cdn.onlinewebfonts.com/svg/img_311846.png" />
<span>LOGIN</span>
</a>
</li>
<li>
<a href="https://www.google.com">
<img src="https://cdn.onlinewebfonts.com/svg/img_311846.png" />
<span>LOGIN</span>
</a>
</li>
<li>
<a href="https://www.google.com">
<img src="https://cdn.onlinewebfonts.com/svg/img_311846.png" />
<span>LOGIN</span>
</a>
</li>
</ul>
</nav>
</body>
</html>
Related
When I hover a menu item it affect other items. All other elements are moving. How to stop other elements to move from its position. Someone please review my code. I want the menu item to be bold when I hover and all the menu item does not move to its position. I tried many different ways to but it always moves and changing other elements positions
Here is the code:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio</title>
</head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
list-style: none;
font-family: "Poppins", sans-serif;
}
.container {
background-color: #242633;
width: 100%;
height: 100vh;
}
.row {
display: flex;
align-items: center;
justify-content: flex-start;
}
.logo img {
margin-left: 50px;
margin-top: 10px;
margin-right: 150px;
height: auto;
width: 120px;
}
.menu {
position: relative;
}
.menu ul li {
display: inline-block;
color: #fff;
margin-inline: 50px;
font-weight: 400;
font-size: 25px;
transition: all 0.5s;
}
.list {
position: relative;
border: 1px solid red;
padding: 0;
margin: 0;
z-index: 10;
}
.menu ul li:hover {
color: #c5c5c5;
cursor: pointer;
background-color: transparent;
font-weight: 900;
z-index: 50;
}
</style>
<body>
<div class="container">
<div class="row">
<div class="logo">
<img src="./Images/logo.png" alt="">
</div>
<div class="menu">
<ul>
<li class="list active">Home</li>
<li>Streets</li>
<li>Merchandise</li>
</ul>
</div>
</div>
</div>
</body>
</html>```
When you increase the font-weight on hover, you are in turn increasing the size of the text in the <li> and if the <li> doesn't already have enough space to contain the text, it needs to adapt its width and this ends up pushing the other elements.
You can simply increase the width of <li> so that the contained text can safely scale within the increased container without altering any of the surrounding elements, like so:
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Portfolio</title>
</head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
list-style: none;
font-family: "Poppins", sans-serif;
}
.container {
background-color: #242633;
width: 100%;
height: 100vh;
}
.row {
display: flex;
align-items: center;
justify-content: flex-start;
}
.logo img {
margin-left: 50px;
margin-top: 10px;
margin-right: 150px;
height: auto;
width: 120px;
}
.menu {
position: relative;
}
.menu ul {
display: flex;
gap: 50px;
}
.menu ul li {
display: inline-block;
color: #fff;
width: 150px;
font-weight: 400;
font-size: 25px;
transition: all 0.3s ease;
}
.list {
position: relative;
border: 1px solid red;
padding: 0;
margin: 0;
z-index: 10;
}
.menu ul li:hover {
color: #c5c5c5;
cursor: pointer;
background-color: transparent;
font-weight: 900;
z-index: 50;
}
</style>
<body>
<div class="container">
<div class="row">
<div class="logo">
<img src="./Images/logo.png" alt="" />
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>Streets</li>
<li>Merchandise</li>
</ul>
</div>
</div>
</div>
</body>
</html>
```
I just started taking an HTML/CSS class for beginners and we have a final project where we need to create a multi-page website so I am currently practicing by making a website of my own but I can't seem to figure out how to align the navbar list I have to right of the logo where the logo is on the left side of the navbar.
Here's my code:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Final Project Practice</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="navbar">
<nav>
<a href="#">
<img class="logo" src="IMG/Phantom_Thieves_Logo.png" alt="site-logo">
</a>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
</body>
</html>
CSS:
body {
background: black;
margin: 0;
color: white;
}
.navbar {
background-color: white;
display: block;
}
.navbar a {
display: inline-flex;
}
.logo {
width: 5em;
margin: 1em;
border-radius: 50%;
background-color: black;
float: left;
position: relative;
}
.navbar ul{
display: flex;
list-style: none;
margin: 0px 25px 0px 90px;
padding: 0;
}
.navbar ul li a {
list-style: none;
text-decoration: none;
color: var(--primary-color);
font-size: 1.5em;
font-weight: bold;
margin-right: 1em;
}
All help would be appreciated!
Set nav as flex container:
body {
background: black;
margin: 0;
color: white;
}
nav {
display: flex;
align-items: center;
background-color: white;
}
.logo {
width: 5em;
margin: 1em;
border-radius: 50%;
background-color: black;
}
.navbar ul{
display: flex;
list-style: none;
/*margin: 0px 25px 0px 90px;*/
padding: 0;
}
.navbar ul li a {
list-style: none;
text-decoration: none;
color: black;
font-size: 1.5em;
font-weight: bold;
margin-right: 1em;
}
<body>
<div class="navbar">
<nav>
<a href="#">
<img class="logo" src="IMG/Phantom_Thieves_Logo.png" alt="site-logo">
</a>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
</body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Final Project Practice</title>
<link rel="stylesheet" href="css/main.css">
<style>
body {
background: black;
margin: 0;
color: white;
}
.navbar {
background-color: rgb(255, 238, 0);
display: block;
display: flex;
align-items: center;
}
.navbar a {
display: inline-flex;
}
.logo {
width: 5em;
margin: 1em;
border-radius: 50%;
background-color: black;
float: left;
position: relative;
}
.navbar ul {
display: flex;
list-style: none;
margin: 0px 25px 0px 90px;
padding: 0;
}
.navbar ul li a {
list-style: none;
text-decoration: none;
color: rgb(0, 0, 0);
font-size: 1.5em;
font-weight: bold;
margin-right: 1em;
}
</style>
</head>
<body>
<nav class="navbar">
<div class="logo">
<a href="#">
<img class="logo" src="IMG/Phantom_Thieves_Logo.png" alt="site-logo">
</a>
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
</nav>
</body>
</html>
Easiest way to create a navbar. Have a look
You need to adjust Width of the images and use this property to align image to left float:left
body,
div {
margin: 0;
border: 0 none;
padding: 0;
background-color: rgb(65, 63, 63);
}
.md {
background-color: black;
padding: 20px;
}
a {
color: white;
text-decoration: none;
padding: 15px;
}
a:hover {
background-color: rgb(224, 224, 224);
color: black;
}
img{
width: 40px;
height: 30px;
float: left;
margin-top: 15px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="https://iconape.com/wp-content/files/zy/291859/png/291859.png">
<div class="md">
HOME
BAND
TOUR
</div>
</body>
</html>
Here's how my navbar looks like:
<div class="menu" id="menu-toggle">
Menu
</div>
<nav class="manu-nav" id="menu-nav">
<img src="https://www.stickpng.com/assets/images/58b061138a4b5bbbc8492951.png" height="45" />
<a class="nav-a" href="#">Home</a>
<a class="nav-a" href="#">Cats</a>
<a class="nav-a" href="#">Litters</a>
<a class="nav-a" href="#">Toys</a>
<a class="nav-a" href="#">About us</a>
<a class="nav-a" href="#">Contact us</a>
</nav>
I am trying to move the image away from the home button, but if I use padding or margin, the whole thing is changing because the navbar has got justify-content: center; style, Is there a way to keep the navabar option button centered and move just the logo?
jsfiddle
Can add class for image '.site_left_img' then add css.
.site_left_img {
position: absolute;
left: 3%;
top: 0;
}
try this one
* {
margin: 0;
padding: 0;
}
.logo {
width: 10%;
display:inline-block;
}
body {
}
nav ul {
margin: 0;
padding: 0;
}
nav ul li {
list-style: none;
margin: 1%;
font-size: 2em;
display:inline-block;
}
nav ul li a {
text-decoration: none;
float: left;
text-align: center;
font-family: 'Gloria Hallelujah', cursive;
color: #E6E6E6;
}
nav {
overflow: hidden;
background-color: #214569;
position: fixed;
top: 0;
width: 100%;
}
nav ul li:hover {
background-color: #8C9DBF;
}
/*
nav p {
top: 0;
float: right;
font-family: 'Gloria Hallelujah', cursive;
font-size: 1.5em;
}
*/
header {
background-color: #214569;
opacity:0.7;
}
.socialMedia {
width: 10%;
display: inline-block;
position: absolute;
top: 0;
right: 0;
}
h2 {
font-family: 'Gloria Hallelujah', cursive;
color: #7D0CE8;
font-size: 5em;
text-shadow: 4px 4px 4px #fff;
opacity: .9;
position: relative;
text-align: center;
top: 32%;
}
h1 {
font-family: 'Permanent Marker', cursive;
font-size: 9em;
color: #7D0CE8;
text-shadow: 4px 4px 4px #fff;
opacity: .8;
position: relative;
text-align: center;
top: 30%;
}
#secondBackground {
background: url(img/salad02.jpg) no-repeat;
background-size: cover;
height: 1400px;
width: auto;
}
#thirdBackground {
background: url() no-repeat;
background-size: cover;
height: 1000px;
width: auto;
}
<html>
<head>
<title>Restaurant HAYQ</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Aurimas Ransys">
<meta name="keywords" content="Armenian Food, Food">
<meta name="description" content="Armenian Food Business">
<link href="https://fonts.googleapis.com/css?family=Cabin" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Bungee" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Great+Vibes|Permanent+Marker" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah|Indie+Flower" rel="stylesheet">
</head>
<body>
<section id="navbackground">
<header>
<nav>
<ul>
<img src="img/hayq.png" alt ="logo" class="logo"/>
<li>Home</li>
<li>Drivers</li>
<li>Bolids</li>
<li>about us</li>
<li>Contact us</li>
<img src="img/media.png" alt="social media" class="socialMedia">
</ul>
<!-- Just wanted to add social media on nav bar
<p>Follow us on<br> social media</p>
-->
</nav>
</header>
</section>
<section id="firstdBackground">
<h1>HAYQ</h1>
<h2>Armenian Specials</h2>
</section>
<section id="secondBackground">
nothing here
</section>
</body>
</html>
I'm trying to make a page, just for exercise, and I came up in a problem, so if you run the code the logo should be on top in center, than the menu centered under it.. but it falls in the background, help please
1. how to add a dropdown under every three menu list items where I can add some text, images and location
body {
background-color:lightgray;
font-family: Tahoma, Cambria;
}
#header {
height: 300px;
}
#logo {
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
}
#menu {
position: relative;
max-height:60px;
font-family: Cambria;
font-style: bold, italic;
text-align: center;
}
#menu ul {
list-style-type: none;
margin: 0;
padding: 0;
float:none;
}
#menu li a {
display:inline-block;
color:#009CFF;
padding: 10px 200px;
overflow:hidden;
transition: 0.3s;
font-style:italic;
font-weight: bold;
text-decoration:none;
margin: 0 0 0 0;
}
#menu li a:hover {
background-color: dimgray;
color: deepskyblue;
}
body {
border: 2px solid dark-gray ;
}
l>
<!DOCTYPE html >
<html>
<head>
<title></title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
</head>
<body>
<header>
<img src = "http://via.placeholder.com/350x150" id = "logo" alt = "Antomatik logo"/>
</header>
<div id = "menu">
<ul>
<li class="onama">
O nama</li>
<li class="povijest">
Povijest</li>
<li class="kontakt">
Kontakt</li>
</ul>
</div>
<footer>
</footer>
</body>
</html>
Its header, not #header
body {
background-color:lightgray;
font-family: Tahoma, Cambria;
}
header {
height: 100px;
}
#logo {
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
}
#menu {
position: relative;
max-height:60px;
font-family: Cambria;
font-style: bold, italic;
text-align: center;
}
#menu ul {
list-style-type: none;
margin: 0;
padding: 0;
float:none;
}
#menu li a {
display:inline-block;
color:#009CFF;
padding: 10px 200px;
overflow:hidden;
transition: 0.3s;
font-style:italic;
font-weight: bold;
text-decoration:none;
margin: 0 0 0 0;
}
#menu li a:hover {
background-color: dimgray;
color: deepskyblue;
}
body {
border: 2px solid dark-gray ;
}
l>
<!DOCTYPE html >
<html>
<head>
<title></title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
</head>
<body>
<header>
<img src="http://via.placeholder.com/300x100" id = "logo" alt = "Antomatik logo"/>
</header>
<div id = "menu">
<ul>
<li class="onama">
O nama</li>
<li class="povijest">
Povijest</li>
<li class="kontakt">
Kontakt</li>
</ul>
</div>
<footer>
</footer>
</body>
</html>
I wonder why can't i say hi in the beggining of the message? It's being auto removed. Anyway i'm trying to make a css only slide out menu following this lesson:
https://www.youtube.com/watch?v=d4P8s-mkMvs&list=PLqGj3iMvMa4L8L9p0bCpBn6A5lwKxqwqR
But for some reason it doesn't work for me. The idea is - when menu icon is clicked the checkbox is checked and menu should change it's margin-left from -200 to 0. But it doesn't.
Any help?
body {
padding: 0;
margin: 0;
font-family: 'Open Sans', sans-serif;
-webkit-font-smoothing: antialiased;
text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
}
nav {
height: 100%;
position: fixed;
margin-left: -200px;
}
nav ul {
list-style: none;
background-color: #333;
padding-top: 30px;
width: 150px;
height: 100%;
margin: 0;
}
nav ul li {
margin-top: 5px;
}
nav ul li a {
margin-left: 17px;
text-decoration: none;
color: #A0A0A0;
font-size: 19px;
text-shadow: rgba(0,0,0,.01) 0 0 1px;
}
nav ul li a:hover {
color: #FFF;
}
.menuicon {
font-size: 20px;
margin-top: 30px;
margin-left: 30px;
color: #333;
text-decoration: none;
cursor: pointer;
}
#menustate {
margin-left: 400px;
}
#menustate:checked + .page-wrap .sidebar{
margin-left: 0px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css-1.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="javascript-1.js"></script>
<title>Slide nav</title>
</head>
<body>
<div class="page-wrap">
<nav class="sidebar">
<ul>
<li>Home</li>
<li>Products</li>
<li>Cities</li>
<li>Contacts</li>
</ul>
</nav>
<label for="menustate"><p class="menuicon" href="">☰</p></label>
<div class="check">
<input type="checkbox" id="menustate" value="">
</div>
</div>
</body>
</html>
Css + operator
When using the css + operator. It needs to be a sibling directly next
to one an other.
Added transition, makes it look better.
body {
padding: 0;
margin: 0;
font-family: 'Open Sans', sans-serif;
-webkit-font-smoothing: antialiased;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
}
nav {
height: 100%;
position: fixed;
}
nav ul {
list-style: none;
background-color: #333;
padding-top: 30px;
width: 150px;
height: 100%;
margin: 0;
}
nav ul li {
margin-top: 5px;
}
nav ul li a {
margin-left: 17px;
text-decoration: none;
color: #A0A0A0;
font-size: 19px;
text-shadow: rgba(0, 0, 0, .01) 0 0 1px;
}
nav ul li a:hover {
color: #FFF;
}
.menuicon {
font-size: 20px;
margin-top: 30px;
margin-left: 30px;
color: #333;
text-decoration: none;
cursor: pointer;
}
.sidebar {
margin-left: -200px;
transition: margin-left 1s;
}
#menustate:checked + .sidebar {
margin-left: 0px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css-1.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="javascript-1.js"></script>
<title>Slide nav</title>
</head>
<body>
<div class="page-wrap">
<label for="menustate">
<p class="menuicon" href="">☰</p>
</label>
<input type="checkbox" id="menustate" value="">
<nav class="sidebar">
<ul>
<li>Home
</li>
<li>Products
</li>
<li>Cities
</li>
<li>Contacts
</li>
</ul>
</nav>
</div>
</body>
</html>
The problem is that your selector, which should be "doing the magic" is incorrect.
#menustate:checked + .page-wrap .sidebar
This will target a .sidebar element, inside a .page-wrap element which is ADJACENT to a checked #menustate element. This means that not only do the #menustate and .page-wrap need to be siblings, the former needs to be placed RIGHT before the latter. So something like this.
<input id="menustate" type="checkbox">
<div class=".page-wrap>
<div class="sidebar"></div>
</div>