I used :before and :after to create a custom shape navbar, but now my navbar elements are spilling out when resizing to smaller widths, and also I am now limited to single colors for backgrounds to avoid pseudo elements from revealing themselves.
*,
html,
body {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
font-size: 16px;
}
body {
background-color: #FFFFFF;
min-height: 100vh;
display: flex;
flex-direction: column;
font-family: 'Libre Baskerville', serif;
}
nav {
background-color: #351152;
display: flex;
flex-wrap: wrap;
align-items: center;
width: 100%;
padding: 1.2em 0 .5em 0;
}
nav::after,
nav::before {
position: absolute;
content: '';
width: 35%;
height: 1rem;
background: white;
}
nav::before {
right: -5%;
transform: skew(-40deg, 0);
top: 35;
}
nav::after {
left: -5%;
transform: skew(40deg, 0);
top: 35;
}
nav ul {
display: inline-flex;
justify-content: center;
width: 100%;
gap: 1.5em;
}
nav ul li {
list-style: none;
font-size: 1rem;
}
ul li a {
text-decoration: none;
color: #FFFFFF;
}
ul li a:hover {
transition: .2s ease-in-out;
color: #E09419;
}
<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">
<script src="https://kit.fontawesome.com/20c9245509.js" crossorigin="anonymous"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Libre+Baskerville&display=swap"
rel="stylesheet">
<title>My Portfolio</title>
<link rel="stylesheet" href="resources/style.css">
</head>
<body>
<nav>
<ul>
<li>Home</li>
<li>About Me</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</nav>
</body>
</html>
Is there any other way to create this kind of shape without having these problems?
Use clip-path;
*,
html,
body {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
font-size: 16px;
}
body {
background-color: #FFFFFF;
min-height: 100vh;
display: flex;
flex-direction: column;
font-family: 'Libre Baskerville', serif;
}
nav {
background-color: #351152;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 1.2em 0 0 0;
}
nav ul {
display: inline-flex;
justify-content: center;
gap: 1.5em;
}
nav ul li {
list-style: none;
font-size: 1rem;
}
ul li a {
text-decoration: none;
color: #FFFFFF;
}
ul li a:hover {
transition: .2s ease-in-out;
color: #E09419;
}
.nav-before-after {
width: 25%;
height: 25px;
flex: 1 1 0;
}
.nav-before-after > div {
height: 100%;
width: 100%;
background: white;
}
<nav>
<div class="nav-before-after">
<div style="clip-path: polygon(0% 50%, 80% 50%, 100% 100%, 0% 100%, 0% 60%);"></div>
</div>
<ul>
<li>Home</li>
<li>About Me</li>
<li>Projects</li>
<li>Contact</li>
</ul>
<div class="nav-before-after">
<div style="clip-path: polygon(0% 100%, 20% 50%, 100% 50%, 100% 100%, 0% 100%);">E</div>
</div>
</nav>
Adjust the values to your liking
Related
I am making a responsive navigation bar. When i am making it in mobile view with hamburger it is not working. I am using checkbox for this. When someone click the hamburger menu in mobile view the check box will checked and css of the check box with type checked will display it. Code is given below.
<!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">
<link rel="stylesheet" href="./styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
<script src="./javascript.js"></script>
<title>Pricing Page</title>
</head>
<body>
<!-- Navigation -->
<nav>
<input type="checkbox" id="check">
<div class="logo">
<h3>Spenflo</h3>
</div>
<div class="menus">
<ul class='menu'>
<li> Pricing</li>
<li> About </li>
<li> Blog </li>
<li> Contact </li>
<li class="login"> Login </li>
<li class="get-started"> Get Started </li>
</ul>
</div>
<div class="signup">
<button><a class="login-btn" href="/">Login</a></button>
<button><a class="get_started-btn" href="/">Get Started</a></button>
</div>
<label for="check" class="checkbtn">
<i class="fas fa-bars"></i>
</label>
</nav>
</body>
</html>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
overflow: hidden;
}
#font-face {
font-family: "Satoshi";
src: url(./fonts/Satoshi-Regular.otf) format("opentype");
font-weight: normal;
}
#font-face {
font-family: "Satoshi";
src: url(./fonts/Satoshi-Bold.otf) format("opentype");
font-weight: bold;
}
#font-face {
font-family: "p22MackinacPro";
src: url(./fonts/P22MackinacPro-BoldItalic_11.otf) format("opentype");
font-style: italic;
}
nav {
position: relative;
font-family: 'Satoshi';
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 10px;
}
nav .logo {
color: #D53987;
margin-left: 20px;
cursor: pointer;
}
nav .menus {
margin-left: 10%;
}
nav .menus ul {
display: flex;
gap: 10px;
list-style: none;
}
a {
text-decoration: none;
color: black;
}
nav .menus ul li {
font-size: 18px;
line-height: 100%;
cursor: pointer;
}
nav .menus ul .login,
.get-started {
display: none;
}
nav .signup a {
text-decoration: none;
color: #000;
}
nav .signup button {
background-color: #000;
font-size: 18px;
width: 180px;
height: 72px;
border: none;
top: 0px;
cursor: pointer;
}
nav .signup button .login-btn {
cursor: pointer;
margin-right: 30px;
}
nav .signup button .get_started-btn {
color: #fff;
cursor: pointer;
}
nav .signup button:first-child {
background-color: white;
width: auto;
height: auto;
}
.checkbtn {
font-size: 30px;
color: #000;
float: right;
line-height: 80px;
margin-right: 10px;
cursor: pointer;
display: none;
}
#check {
display: none;
}
#media screen and (max-width: 768px) {
.checkbtn {
display: block;
}
nav .menus ul {
position: fixed;
width: 100%;
height: 100vh;
left: 100%;
top: 9%;
background-color: red;
bottom: 15%;
text-align: center;
transition: all .5s;
display: flex;
flex-direction: column;
align-items: center;
transition: all 0.5s;
}
nav .menus ul .login,
.get-started {
display: block;
}
nav .menus ul li {
width: 90%;
margin: 10px 0;
padding-bottom: 12px;
border-bottom: 1px solid rgba(0, 0, 0, 0.24);
}
nav .signup {
display: none;
}
nav #check:checked~nav .menus ul {
left: 0%;
}
}
I tried everything to do this using only css but nothing is working at all
I have a working code for flex in css. Although the buttons are realigning but the blue bars is not moving. Due to this changing the screen size make it seem that all the buttons have disappeared.
*
{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body
{
background-image: url(background.jpg);
background-size: cover;
background-position : center;
font-family: sans-serif;
}
.menu-bar
{
background: #273044;
text-align: center;
height:30px;
}
.menu-bar ul
{
display: inline-flex;
list-style: none;
color: #fff;
}
.menu-bar ul li
{
width: 120px;
place-items:center;
display: grid;
padding: 5px;
}
.menu-bar ul li a
{
text-decoration: none;
color: white;
}
.active, .menu-bar ul li:hover
{
background-color: #0b56ab;
height:auto;
height:30px;
}
.toggle-button{
position: absolute;
top: 0.75rem;
right: 1rem;
display: flex;
flex-direction: column;
justify-content: space-between;
width: 31px;
height: 21px;
}
.toggle-button .bar{
height: 3px;
width: 100%;
background-color: white;
border-radius: 10px;
}
#media(max-width: 700px){
.toggle-button{
display:flex;
}
.menu-bar-links{
/* display:none; */
width:100%;
}
.menu-bar{
flex-direction: column;
align-items: flexstart;
}
.menu-bar-links ul{
width:100%;
flex-direction: column;
}
.menu-bar-links li{
text-align: center;
}
}
/* body{margin:0; padding:0; font-size:13px; font-family:Georgia, "Times New Roman", Times, serif; color:#919191; background-color:#232323;} */
This is my HTML Code:
<html>
<head>
<title> Title of page </title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet1" href="https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome-free#6.1.1/css/fontawesome.min.css">
</head>
<!----header---->
<body>
<div class="menu-bar">
<a href = "#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="menu-bar-links">
<ul>
<li class="active">Home</li>
<li>About us</li>
<li>Services</li>
<li>Investors</li>
<li>Pricing</li>
<li>Training </li>
<li>Contact</li>
</ul>
</div>
</div>
<!-- <div class= "grid">
</div> -->
</body>
</html>
This is how it looks when in full screen:
When i rearrange the screen it looks like this:
As you can see all the buttons seems to have disappeared except the one which is hovered over
It is also not centering even with
.menu-bar-links li{
text-align: center;
The problem you have is that you have a fixed height on your .menu-bar, namely height: 30px. You're better off removing that, adding some padding for presentation and making the .menu-bar element a flex container.
Link to CodePen:
https://codepen.io/thechewy/pen/QWQQMjg
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.menu-bar {
background: #273044;
text-align: center;
/* height: 30px; */
padding: 1rem;
display: flex;
justify-content: center;
align-items: center;
}
.menu-bar ul {
display: inline-flex;
list-style: none;
color: #fff;
}
.menu-bar ul li {
width: 120px;
place-items: center;
display: grid;
padding: 5px;
}
.menu-bar ul li a {
text-decoration: none;
color: white;
}
.active,
.menu-bar ul li:hover {
background-color: #0b56ab;
height: auto;
height: 30px;
}
.toggle-button {
position: absolute;
right: 1rem;
display: flex;
flex-direction: column;
justify-content: space-between;
width: 31px;
height: 21px;
}
.toggle-button .bar {
height: 3px;
width: 100%;
background-color: white;
border-radius: 10px;
}
#media (max-width: 700px) {
.toggle-button {
display: flex;
}
.menu-bar-links {
/* display:none; */
width: 100%;
}
.menu-bar {
flex-direction: column;
align-items: flexstart;
}
.menu-bar-links ul {
width: 100%;
flex-direction: column;
}
.menu-bar-links li {
text-align: center;
}
}
<html>
<head>
<title> Title of page </title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet1" href="https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome-free#6.1.1/css/fontawesome.min.css">
</head>
<body>
<div class="menu-bar">
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="menu-bar-links">
<ul>
<li class="active">Home</li>
<li>About us</li>
<li>Services</li>
<li>Investors</li>
<li>Pricing</li>
<li>Training </li>
<li>Contact</li>
</ul>
</div>
</div>
</body>
</html>
I'm having issues placing a small image at the right of a container.
For one reason or another, the container app-banniere-utilisateur__stand
is trying to grow in width, even though I added flex-grow: 0;
While searching, I found out that the img tag within that container
is actually enforcing it's max-width as if I wrote width. (see comment at the end of CSS)
On the code snippet, I added a red background on the extra-width that shouldn't exists.
I'm not sure how it happened, any idea on how to fix this (beside fixing img width, which isn't the point here) ?
html {
font-size: 16px;
font-family: "PT Sans", sans-serif;
}
*,
*:before,
*:after {
box-sizing: border-box;
}
.app-banniere-utilisateur {
display: flex;
flex-direction: row;
height: 74px;
padding: 6px 10px;
max-width: 300px;
}
.app-banniere-utilisateur .app-banniere-utilisateur__avatar {
border: 3px solid #aaaaaa;
background-image: url(https://img-os-static.mihoyo.com/avatar/avatar22.png);
background-size: cover;
border-radius: 50%;
margin: auto 10px auto 0;
flex-shrink: 0;
width: 60px;
}
.app-banniere-utilisateur .app-banniere-utilisateur__avatar.online {
border-color: #54c242;
}
.app-banniere-utilisateur .app-banniere-utilisateur__avatar:after {
content: "";
display: block;
padding-top: 100%;
}
.app-banniere-utilisateur .app-banniere-utilisateur__info {
display: flex;
flex-direction: column;
flex-grow: 1;
overflow: hidden;
padding: 3px 0;
position: relative;
}
.app-banniere-utilisateur .app-banniere-utilisateur__info div {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.app-banniere-utilisateur .app-banniere-utilisateur__info div.app-banniere-utilisateur__info-nom {
font-size: 20px;
font-weight: bold;
margin-bottom: auto;
}
.app-banniere-utilisateur .app-banniere-utilisateur__info div.app-banniere-utilisateur__info-nav {
background-color: white;
bottom: -38px;
color: #2196f3;
display: flex;
flex-direction: row;
left: 0;
width: 100%;
position: absolute;
transition: bottom 150ms;
transition-timing-function: ease-in;
z-index: 1;
}
.app-banniere-utilisateur .app-banniere-utilisateur__info div.app-banniere-utilisateur__info-nav i {
font-size: 28px;
margin-right: 8px;
}
.app-banniere-utilisateur .app-banniere-utilisateur__info div.app-banniere-utilisateur__info-nav i:last-child {
margin-right: 0;
}
.app-banniere-utilisateur .app-banniere-utilisateur__stand {
background-color: red;
flex-grow: 0;
flex-shrink: 0;
text-align: right;
}
.app-banniere-utilisateur .app-banniere-utilisateur__stand img {
max-height: 100%;
/* max-width is pushing parent width */
max-width: 80px;
}
.app-banniere-utilisateur:hover .app-banniere-utilisateur__info .app-banniere-utilisateur__info-nav {
bottom: 0;
transition: bottom 200ms;
transition-timing-function: ease-in-out;
}
.app-banniere-utilisateur {
border: 1px dashed;
margin-bottom: 20px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css2?family=Material+Icons" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght#0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css">
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js" defer></script>
</head>
<body>
<div class="app-banniere-utilisateur">
<div class="app-banniere-utilisateur__avatar online"></div>
<div class="app-banniere-utilisateur__info">
<div class="app-banniere-utilisateur__info-nom">FirstName LastName</div>
<div class="app-banniere-utilisateur__info-desc">Short user description</div>
<div class="app-banniere-utilisateur__info-nav">
<i class="material-icons">info</i>
<i class="material-icons">message</i>
<i class="material-icons">videocam</i>
</div>
</div>
<div class="app-banniere-utilisateur__stand">
<img src="https://i.pinimg.com/280x280_RS/35/7c/92/357c92d4bbd9b59bee2ef9d89d088f6d.jpg" alt="3D at Home">
</div>
</div>
</body>
</html>
I have a drop-down menu on a site that I have been working on I and I need to get rid of this gap above the drop-down menu. It is quite bothersome.
Figure A
So, in an attempt to fix it, I changed the li line-height from 50px to 47px and got this:
Figure B
Almost what I want, but not quite. The problem? The li is higher causing the little animation I have under the li to no longer touch the image.
Then, I tried giving the li a relative position. But now, the drop-down is the same width as the 'Patient Info' link.
Figure C
Here is my jsfiddle link if you would like to fiddle around with it. There is no rush. Thank you!
Code:
body {
font-family: 'Source Sans Pro', sans-serif;
max-width: 2500px;
margin: 0 auto 30px auto;
}
#import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: normal;
}
img#profile {
width: 100%;
max-width: 64px;
border-radius: 100%;
}
.header,
.menu,
.hero,
.slider,
.img-display {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
::selection {
background: #11b5e4;
color: white;
}
::-moz-selection {
background: #11b5e4;
color: white;
}
/* HEADER & MENU STYLE START */
.header {
height: 100px;
padding: 15px 10px 10px 10px;
display: flex;
justify-content: center;
align-items: center;
}
.header h1 {
margin: 0px 25px 0px 25px;
}
.header img {
height: 100%;
pointer-events: none;
}
.header a i {
font-size: 30px;
margin: 0px 0px 0px 15px;
color: black;
transition: .15s color;
}
.header a i:hover {
color: #11b5e4;
}
.menu-wrapper {
height: 50px;
display: flex;
justify-content: center;
}
.menu li {
display: inline-block;
line-height: 50px;
}
.menu li a {
display: inline-block;
font-size: 23px;
margin: 0px 10px;
transition: .2s cubic-bezier(.5, 3, .5, .5) background;
color: black;
background: linear-gradient(#11b5e4, #11b5e4) 50% 100%/100% 0px no-repeat;
text-decoration: none;
}
.menu li a:hover {
background: linear-gradient(#11b5e4, #11b5e4) 50% 100%/100% 5px no-repeat;
}
.menu-wrapper #toggle-menu {
display: none;
}
/* FOR STACK OVERFLOW */
.menu li ul {
margin: 0;
padding: 0;
display: none;
background: white;
}
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
padding: 5px 15px 5px 15px;
}
li:hover ul {
display: flex;
flex-direction: column;
position: absolute;
}
/* END OF FOR STACK OVERFLOW */
#media only screen and (max-width: 1000px) {
.menu {
opacity: 0;
position: relative;
top: 50px;
transition: .25s opacity;
pointer-events: none;
}
.menu-wrapper #toggle-menu:checked~.menu {
opacity: 1;
pointer-events: all;
}
.menu li {
display: block;
text-align: center;
background-color: white;
padding: 0px 15px;
}
.menu-wrapper label {
align-self: center;
width: 32px;
height: 32px;
position: absolute;
left: 0;
right: 0;
margin: auto;
}
.menu-wrapper label:hover {
cursor: pointer;
}
.menu-wrapper label#open-menu {
transition: opacity .5s, transform .3s;
background: url(http://ianspence.us/stack/menu-open-icon.png) center center/cover no-repeat;
}
.menu-wrapper label#close-menu {
transition: opacity .5s, transform .3s;
background: url(http://ianspence.us/stack/menu-close-icon.png) center center/cover no-repeat;
opacity: 0;
}
.menu-wrapper #toggle-menu:checked~label#open-menu {
opacity: 0;
transform: rotate(360deg);
}
.menu-wrapper #toggle-menu:checked~label#close-menu {
opacity: 1;
transform: rotate(360deg);
}
}
#media only screen and (max-width: 750px) {
.header {
height: 75px;
}
.header h1 {
margin: 0px 5px;
font-size: 20px;
}
.header a i {
font-size: 20px;
margin: 0px 0px 0px 5px;
}
}
/* HEADER & MENU STYLE END */
/* HERO START */
.hero {
display: flex;
justify-content: center;
height: calc(150px + 20vw);
width: 100%;
}
.hero h1 {
text-align: center;
font-size: 35px;
padding: 8px;
margin: 15px;
background: rgba(17, 181, 228, .75);
border-radius: 10px;
color: white;
font-weight: bolder;
}
.hero.a {
align-items: flex-end;
background: url(http://ianspence.us/stack/hero.a.jpg) center/cover no-repeat;
}
.hero.b {
align-items: flex-end;
background: url(media/hero.b.jpeg) center/cover no-repeat;
}
#media only screen and (max-width: 900px) {
.hero.a,
.hero.b {
height: 300px;
}
.hero.a h1,
.hero.b h1 {
font-size: 26px;
}
}
#media only screen and (max-width: 400px) {
.hero.a,
.hero.b {
height: 250px;
}
.hero.a h1,
.hero.b h1 {
font-size: 16px;
}
}
/* HERO END */
<!DOCTYPE html>
<html>
<head>
<title>#pfcainc | Home</title>
<link rel='shortcut icon' href='http://ianspence.us/stack/icon.png'>
<link rel='stylesheet' href='style.css'>
<link rel='stylesheet' href='media/fontawesome/css/fontawesome-all.css'>
<meta name='description' content=''>
<meta name='keywords' content=''>
<meta name='robots' content='index, follow'>
<meta name='revisit-after' content='3 days'>
<meta name='viewport' content='initial-scale=1'>
</head>
<body>
<div class='header'>
<img src='http://ianspence.us/stack/icon.png'>
<h1>Panhandle Family Care Associates</h1>
<a href='https://facebook.com/panhandlefamilycareassociates/'><i class='fab fa-facebook-square'></i></a>
<a href='https://twitter.com/pfcainc'><i class='fab fa-twitter'></i></a>
</div>
<div class='menu-wrapper'>
<input type='checkbox' id='toggle-menu'>
<label for='toggle-menu' id='open-menu'></label>
<label for='toggle-menu' id='close-menu'></label>
<!--Start Menu Display-->
<div class='menu'>
<li><a href='=./'>Home</a></li>
<li><a href='services'>Services</a></li>
<li><a href='physicians'>Physicians</a></li>
<li>Patient Info
<ul>
<li><a href='patient-forms'>Patient Forms</a></li>
<li><a href='patient-education'>Patient Education</a></li>
<li><a href='http://myhealthrecord.com'>Patient Portal</a></li>
</ul>
</li>
<li><a href='office-info'>Office Info</a></li>
</div>
<!--End Menu Display-->
</div>
<div class='hero a'>
<h1>Treating your family like ours since 2002</h1>
</div>
</body>
</html>
Notes:
In jsfiddle, make sure you increase the width of the preview so that the
full menu is there, not the hamburger menu.
I am trying to avoid Javascript completely.
margin-top: -3px for submenu seems to fix the issue across all (major) browsers, however I'd recommend fix from my Codepen, with flex and defined height for li elements.
Fast & simple
HTML:
<ul class="submenu">
<li><a href='patient-forms'>Patient Forms</a></li>
<li><a href='patient-education'>Patient Education</a></li>
<li><a href='http://myhealthrecord.com'>Patient Portal</a></li>
</ul>
CSS:
.submenu {
margin-top: -3px !important;
}
More clean approach
Codepen
I'm trying to make css drop-down menu responsive according to the browser window.
I want the menu text to stay centered according to the browser window
Please see this video as examples of the intended behavior:
https://youtu.be/ZPWforRw_cc?t=34m23s
/* ------------------------------------------ */
/* BASIC SETUP */
/* ------------------------------------------ */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.page-wrap {
width: 1216px;
margin: 0 auto;
}
/* ------------------------------------------ */
/* PAGE CONTENT */
/* ------------------------------------------ */
.box1 {
height: 30px;
width: 300px;
background: #8242b1;
}
.box2 {
height: 30px;
width: 300px;
background: #b14242;
}
.box3 {
height: 30px;
width: 300px;
background: #424bb1;
}
.page-content {
display:flex;
justify-content: center;
transition: ease-in-out 0.3s;
position:relative;
top: -260px;
z-index: 0; }
.toggle {
transition: ease-in-out 0.3s;
text-decoration: none;
font-size: 30px;
color: #eaeaea;
position:relative;
top: -120px;
left: 20px;
z-index: 1; }
.toggle:hover {
color:#cccccc; }
.sidebar {
display:flex;
justify-content: center;
align-items: center;
transition: ease-in-out 0.3s;
position: relative;
top: -220px;
bottom: 0px;
left: 0px;
height: 220px;
width: auto;
padding: 30px;
background: #333;
z-index: 1; }
.sidebar li {
display:flex;
justify-content: center;
list-style: none;
color: rgba(255, 255, 255,0.8);
font-family: 'Lato', sans-serif;
font-size: 16px;
margin-bottom: 16px;
cursor: pointer; }
.sidebar li:hover {
color: rgba(255, 255, 255,1); }
#sidebartoggler {
display: none; }
#sidebartoggler:checked + .page-wrap .sidebar {
top: 0px; }
#sidebartoggler:checked + .page-wrap .toggle {
top: 100px; }
#sidebartoggler:checked + .page-wrap .page-content {
padding-top: 220px; }
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="resources/css/style.css">
<link href='https://fonts.googleapis.com/css?family=Lato:400,900' rel='stylesheet' type='text/css'>
</head>
<body>
<input type="checkbox" id="sidebartoggler" name="" value="">
<div class="page-wrap">
<div class="sidebar">
<ul>
<li>Home</li>
<li>Projects</li>
<li>Clients</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
<label for="sidebartoggler" class="toggle">☰</label>
<div class="page-content">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</div>
</body>
</html>
this will work,
.page-wrap{
width:1216px;
}
+ use Media Queries as follows:
#media only screen and (max-width: 1216px) {
.page-wrap{
width: 100%;}
}