Setting A Hamburger Menu So That It Stretches Across The Entire Screen - css

Below is the code that I've used to create a responsive hamburger menu. I'd like to set the hamburger menu so that when opened it stretches (and is displayed) across the entire screen. I imagine that this would involve editing the CSS, which I have unsuccessfully tried doing.
If anyone has any ideas on how I could have the hamburger menu displayed across the entire screen, I'd appreciate you sharing your knowledge with me. Thank you.
.body {
background-color: white;
font-family: sans-serif;
}
.searchbar {
float: right;
}
.image {
text-align: center;
}
.setsumei {
margin-left: 20px;
margin-right: 20px;
}
.footer {
width: 100%;
height: 40px;
text-align: center;
border-top: 1px solid black;
position: absolute;
bottom: 0;
padding: 10px;
}
.page-wrap {
min-height: 100%;
margin-bottom: -40px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer,
.page-wrap:after {
height: 20px;
}
.site-footer {
text-align: center;
border-top: 1px solid black;
padding: 10px;
}
*,
*:before,
*:after {
padding-left: 0;
margin: 0;
box-sizing: border-box;
}
ol,
ul {
list-style: none;
}
a {
text-decoration: none;
color: black;
}
.cp_cont {
height: auto;
}
/* menu */
.cp_offcm03 {
position: relative;
z-index: 5000;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
width: 100%;
height: auto;
padding-top: 0;
-webkit-transition: transform 0.3s ease-in;
transition: transform 0.3s ease-in;
text-align: center;
color: black;
background-color: white;
}
.cp_offcm03 nav,
.cp_offcm03 ul {
height: 100%;
}
.cp_offcm03 li {
display: inline-block;
margin-right: -6px;
}
.cp_offcm03 a {
display: block;
padding: 15px 45px;
margin-bottom: -5px;
-webkit-transition: background-color .3s ease-in;
transition: background-color .3s ease-in;
}
.cp_offcm03 a:hover {
background-color: lightgray;
}
/* menu toggle */
#cp_toggle03 {
display: none;
}
#cp_toggle03:checked~.cp_offcm03 {
-webkit-transform: translateX(0);
transform: translateX(0);
}
#cp_toggle03:checked~.cp_container {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.cp_mobilebar {
display: none;
}
/* content */
.cp_container {
position: relative;
top: 0;
padding: 35px auto;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_content {
margin: 0 auto;
padding: 20px;
height: 65vh;
text-align: center;
}
#media (max-width: 1130px)and (min-width: 280px) {
/* menu */
.cp_offcm03 {
position: fixed;
left: -250px;
overflow-y: hidden;
width: 250px;
height: 100%;
padding-top: 40px;
color: black;
background-color: white;
z-index: 1000;
}
.cp_offcm03 nav {
background: white;
border-right: 0.5px solid lightgray;
margin-left: -210px;
}
.cp_offcm03 li {
display: block;
margin-right: 0;
}
.cp_offcm03 a {
padding: 20px;
}
/* menu toggle */
.cp_mobilebar {
display: block;
z-index: 2000;
position: relative;
top: 0;
left: 0;
padding: 0 25px;
width: 100%;
height: 40px;
background-color: white;
border-bottom: .05px solid lightgray;
}
.cp_menuicon {
display: block;
position: relative;
width: 25px;
height: 100%;
cursor: pointer;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon>span {
display: block;
position: absolute;
top: 55%;
margin-top: -0.3em;
width: 100%;
height: 0.2em;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease;
transition: transform .3s ease;
}
.cp_menuicon>span:before,
.cp_menuicon>span:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon>span:before {
-webkit-transform: translateY(-0.6em);
transform: translateY(-0.6em);
}
.cp_menuicon>span:after {
-webkit-transform: translateY(0.6em);
transform: translateY(0.6em);
}
#cp_toggle03:checked+.cp_mobilebar .cp_menuicon {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#cp_toggle03:checked+.cp_mobilebar span:before,
#cp_toggle03:checked+.cp_mobilebar span:after {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
#cp_toggle03:checked~.cp_offcm03 {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
#cp_toggle03:checked~.cp_container {
-webkit-transform: translateX(250px);
transform: translateX(250px);
}
input:checked~#h-menu_black {
display: block;
opacity: .6;
}
#h-menu_black {
display: none;
position: fixed;
z-index: 999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0;
transition: .7s ease-in-out;
}
/* content */
.cp_container {
top: 60px;
height: 92vh;
text-align: center;
}
.noscroll {
overflow: hidden;
position: fixed;
}
}
<div class="cp_cont">
<input id="cp_toggle03" type="checkbox" />
<div class="cp_mobilebar">
<label for="cp_toggle03" class="cp_menuicon">
<span></span>
</label>
</div>
<label id="h-menu_black" class="cp_toggle03" for="cp_menuicon"></label>
<div id="body" class="noscroll"></div>
<header class="cp_offcm03">
<nav>
<ul style="text-align: center; margin-left: 210px; overflow: hidden">
<li style="border-bottom: 1px solid lightgray">Home</li>
<li style="border-bottom: 1px solid lightgray">Blog</li>
<li style="border-bottom: 1px solid lightgray">About This Website</li>
<li style="border-bottom: 1px solid lightgray">Bibliography</li>
</ul>
</nav>
</header>
</div>

It's just a matter of adjusting the menu width and the translation dimension to match. Look into how you can use your browser's document inspector to find styles relevant to your goals.
FYI, you don't need vendor prefixes for transform or transition.
/* Scroll down... */
.body {
background-color: white;
font-family: sans-serif;
}
.searchbar {
float: right;
}
.image {
text-align: center;
}
.setsumei {
margin-left: 20px;
margin-right: 20px;
}
.footer {
width: 100%;
height: 40px;
text-align: center;
border-top: 1px solid black;
position: absolute;
bottom: 0;
padding: 10px;
}
.page-wrap {
min-height: 100%;
margin-bottom: -40px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer,
.page-wrap:after {
height: 20px;
}
.site-footer {
text-align: center;
border-top: 1px solid black;
padding: 10px;
}
*,
*:before,
*:after {
padding-left: 0;
margin: 0;
box-sizing: border-box;
}
ol,
ul {
list-style: none;
}
a {
text-decoration: none;
color: black;
}
.cp_cont {
height: auto;
}
/* menu */
.cp_offcm03 {
position: relative;
z-index: 5000;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
width: 100%;
height: auto;
padding-top: 0;
transition: transform 0.3s ease-in;
text-align: center;
color: black;
background-color: white;
}
.cp_offcm03 nav,
.cp_offcm03 ul {
height: 100%;
}
.cp_offcm03 li {
display: inline-block;
margin-right: -6px;
}
.cp_offcm03 a {
display: block;
padding: 15px 45px;
margin-bottom: -5px;
transition: background-color .3s ease-in;
}
.cp_offcm03 a:hover {
background-color: lightgray;
}
/* menu toggle */
#cp_toggle03 {
display: none;
}
#cp_toggle03:checked~.cp_offcm03 {
transform: translateX(0);
}
#cp_toggle03:checked~.cp_container {
transform: translateX(0);
}
.cp_mobilebar {
display: none;
}
/* content */
.cp_container {
position: relative;
top: 0;
padding: 35px auto;
transition: transform .3s ease-in;
}
.cp_content {
margin: 0 auto;
padding: 20px;
height: 65vh;
text-align: center;
}
#media (max-width: 1130px)and (min-width: 280px) {
/* menu */
.cp_offcm03 {
position: fixed;
left: -100vw; /* <------------------------------------------------ HERE */
overflow-y: hidden;
width: 100vw; /* <------------------------------------------------ HERE */
height: 100%;
padding-top: 40px;
color: black;
background-color: white;
z-index: 1000;
}
.cp_offcm03 nav {
background: white;
border-right: 0.5px solid lightgray;
margin-left: -210px;
}
.cp_offcm03 li {
display: block;
margin-right: 0;
}
.cp_offcm03 a {
padding: 20px;
}
/* menu toggle */
.cp_mobilebar {
display: block;
z-index: 2000;
position: relative;
top: 0;
left: 0;
padding: 0 25px;
width: 100%;
height: 40px;
background-color: white;
border-bottom: .05px solid lightgray;
}
.cp_menuicon {
display: block;
position: relative;
width: 25px;
height: 100%;
cursor: pointer;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon>span {
display: block;
position: absolute;
top: 55%;
margin-top: -0.3em;
width: 100%;
height: 0.2em;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease;
transition: transform .3s ease;
}
.cp_menuicon>span:before,
.cp_menuicon>span:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon>span:before {
-webkit-transform: translateY(-0.6em);
transform: translateY(-0.6em);
}
.cp_menuicon>span:after {
-webkit-transform: translateY(0.6em);
transform: translateY(0.6em);
}
#cp_toggle03:checked+.cp_mobilebar .cp_menuicon {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#cp_toggle03:checked+.cp_mobilebar span:before,
#cp_toggle03:checked+.cp_mobilebar span:after {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
#cp_toggle03:checked~.cp_offcm03 {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
#cp_toggle03:checked~.cp_container {
-webkit-transform: translateX(250px);
transform: translateX(250px);
}
input:checked~#h-menu_black {
display: block;
opacity: .6;
}
#h-menu_black {
display: none;
position: fixed;
z-index: 999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0;
transition: .7s ease-in-out;
}
/* content */
.cp_container {
top: 60px;
height: 92vh;
text-align: center;
}
.noscroll {
overflow: hidden;
position: fixed;
}
}
<div class="cp_cont">
<input id="cp_toggle03" type="checkbox">
<div class="cp_mobilebar">
<label for="cp_toggle03" class="cp_menuicon">
<span></span>
</label>
</div>
<label id="h-menu_black" class="cp_toggle03" for="cp_menuicon"></label>
<div id="body" class="noscroll"></div>
<header class="cp_offcm03">
<nav>
<ul style="text-align: center; margin-left: 210px; overflow: hidden;">
<li style="border-bottom: 1px solid lightgray;">Home</li>
<li style="border-bottom: 1px solid lightgray;">Blog</li>
<li style="border-bottom: 1px solid lightgray;">About This Website</li>
<li style="border-bottom: 1px solid lightgray;">Bibliography</li>

Related

how to make owl carousel appear in all the pages of the blog

im really new at this but made owl carousel appear at the main page of my blog just the way i like it.
the thing is, now i want it to appear the same way in all the pages of the blog. is there a way i can make the call in the pages or anything i can add to the theme or main page so it can show it in all the articles?
i have it in the html of the theme like this
* ######## Top Feature Css ######################### */
.recent-boxes .carousel {
position: relative;
margin: 0 0 0!important;
padding: 0;
overflow: visible;
height: auto;
display: block;
clear: both
}
.owl-carousel .animated {
-webkit-animation-duration: 1000ms;
animation-duration: 1000ms;
-webkit-animation-fill-mode: both;
animation-fill-mode: both
}
.owl-carousel .owl-animated-in {
z-index: 0
}
.owl-carousel .owl-animated-out {
z-index: 1
}
.owl-carousel .fadeOut {
-webkit-animation-name: fadeOut;
animation-name: fadeOut
}
#-webkit-keyframes fadeOut {
0% {
opacity: 1
}
100% {
opacity: 0
}
}
#keyframes fadeOut {
0% {
opacity: 1
}
100% {
opacity: 0
}
}
.owl-height {
-webkit-transition: height 500ms ease-in-out;
-moz-transition: height 500ms ease-in-out;
-ms-transition: height 500ms ease-in-out;
-o-transition: height 500ms ease-in-out;
transition: height 500ms ease-in-out
}
.owl-carousel {
display: none;
width: 100%;
-webkit-tap-highlight-color: transparent;
position: relative;
z-index: 1
}
.owl-carousel .owl-stage {
position: relative;
-ms-touch-action: pan-Y
}
.owl-carousel .owl-stage:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0
}
.owl-carousel .owl-stage-outer {
position: relative;
overflow: hidden;
-webkit-transform: translate3d(0px, 0px, 0px)
}
.owl-carousel .owl-controls .owl-nav .owl-prev,
.owl-carousel .owl-controls .owl-nav .owl-next,
.owl-carousel .owl-controls .owl-dot {
cursor: pointer;
cursor: hand;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
.owl-carousel.owl-loaded {
display: block
}
.owl-carousel.owl-loading {
opacity: 0;
display: block
}
.owl-carousel.owl-hidden {
opacity: 0
}
.owl-carousel .owl-refresh .owl-item {
display: none
}
.owl-carousel .owl-item {
position: relative;
min-height: 1px;
float: left;
-webkit-backface-visibility: hidden;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
.owl-carousel .owl-item img {
display: block;
width: 100%;
-webkit-transform-style: preserve-3d
}
.owl-carousel.owl-text-select-on .owl-item {
-webkit-user-select: auto;
-moz-user-select: auto;
-ms-user-select: auto;
user-select: auto
}
.owl-carousel .owl-grab {
cursor: move;
cursor: -webkit-grab;
cursor: -o-grab;
cursor: -ms-grab;
cursor: grab
}
.owl-carousel.owl-rtl {
direction: rtl
}
.owl-carousel.owl-rtl .owl-item {
float: right
}
.no-js .owl-carousel {
display: block
}
.owl-prev,
.owl-next {
top: 0;
color: #fff;
background-color: rgba(0, 0, 0, 0.75);
font-family: FontAwesome;
position: absolute;
z-index: 1;
display: block;
padding: 0;
cursor: pointer;
padding: 0;
text-align: center;
overflow: hidden
}
.owl-prev {
left: 0
}
.owl-prev:before {
content: "\f104"
}
.owl-next {
right: 0
}
.owl-next:before {
content: "\f105"
}
.owl-prev:hover,
.owl-next:hover {
background-color: #000
}
.owl-dots {
position: absolute;
bottom: 1px;
width: 33.33%;
left: 0;
right: 0;
margin: auto;
text-align: center
}
.owl-dot {
background: #fff;
height: 3px;
width: 10px;
display: inline-block;
margin: 0 5px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
opacity: .6
}
.owl-dot.active,
.owl-dot:hover {
background: #e74c3c
}
.main-carousel {
height: 350px;
overflow: hidden
}
.main-carousel .owl-item {
width: 100%;
}
.carousel-item {
height: 350px;
width: 100%;
position: relative;
padding: 0!important;
display: block;
overflow: hidden
}
.carousel-item .box-image {
height: 350px;
position: relative;
width: 100%;
display: block
}
.carousel-item .box-image:after {
content: no-close-quote;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 151px;
background: url(http://3.bp.blogspot.com/-LnvazGBvKh8/VskckSkmzxI/AAAAAAAAC4s/erEgI6A_ih4/s1600-r/metabg.png) repeat-x;
opacity: .8
}
.carousel-content {
position: absolute;
bottom: 0;
width: 100%;
z-index: 2;
box-sizing: border-box
}
.carousel-item .carousel-content {
padding: 15px;
text-align: center;
}
.carousel-item .recent-title {
margin: 10px 0 5px;
font-size: 19px;
font-weight: 400
}
.carousel-item .recent-title a {
color: #fff;
display: block;
line-height: 1.4em;
text-shadow: 0 .5px .5px rgba(34, 34, 34, 0.3)
}
.carousel-item .recent-author {
color: #fff;
}
.carousel-item .recent-date {
visibility: hidden;
display: none;
}
.carousel-tag a {
display: inline-block;
background-color: #e74c3c;
color: #fff;
height: 20px;
line-height: 20px;
padding: 0 6px;
font-size: 11px;
text-transform: uppercase;
border-radius: 2px
}
.carousel-tag a:before {
content: "\f091";
font-family: FontAwesome;
font-weight: 400;
font-style: normal;
line-height: 1;
padding-right: 4px;
}
.recent-author::before {
content: '\f007';
font-family: fontawesome;
color: #bbb;
margin-right: 5px;
}
.recent-author {
margin-right: 10px;
}
.carousel-overlay {
position: absolute;
left: 0;
top: 0;
z-index: 1;
width: 100%;
height: 100%;
background-color: rgba(40, 35, 40, 0.05)
}
.main-carousel .owl-item:hover .carousel-overlay {
background-color: $mainbgcolor;
opacity:0.5;
}
.carousel-overlay:before {
z-index: 3;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-transform: scale(0,1);
transform: scale(0,1);
}
.carousel-overlay:after {
z-index: 3;
border-right: 1px solid #fff;
border-left: 1px solid #fff;
-webkit-transform: scale(1,0);
transform: scale(1,0);
}
.carousel-overlay:before, .carousel-overlay:after {
z-index: 3;
position: absolute;
top: 10px;
right: 10px;
bottom: 10px;
left: 10px;
content: '';
opacity: 0;
-webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
transition: opacity 0.5s, transform 0.5s;
}
.main-carousel .owl-item:hover .carousel-overlay:before, .main-carousel .owl-item:hover .carousel-overlay:after {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
.main-carousel .owl-prev,
.main-carousel .owl-next {
margin-top: 0px;
width: 40px;
height: 40px;
font-size: 25px;
line-height: 40px
}
.main-carousel .owl-prev {
left: -50px
}
.main-carousel:hover .owl-prev {
left: 0
}
.main-carousel .owl-next {
right: -50px
}
.main-carousel:hover .owl-next {
right: 0
}
.main-carousel .owl-dots {
bottom: 10px
}

Why are my menu items not showing when desktop size?

I followed this tutorial to create a responsive hamburger menu. But i can't figure out why the menu items don't show when my screen is desktop size.
When the screen is mobile size i can click the hamburger menu and the items appear. If i scale up my screen to desktop size while the menu is "open" they do appear the way i want to (because of my media querie). But when i refresh the page (while my screen is desktop size) my menu items don't appear. I can't seem to figure it out, please help if you see my mistake. Thanks!
This is what i want:
This is what i get now:
This is what i get when i scale to mobile screen:
body {
margin: 0;
background-color: #fff;
}
.header {
background-color: #fff;
position: fixed;
width: 100%;
z-index: 3;
.menu-btn {
display: none;
&:checked ~ .menu {
max-height: 240px;
}
&:checked ~ .menu-icon .nav-icon {
background: transparent;
&:before {
transform: rotate(-45deg);
top: 0;
}
&:after {
transform: rotate(45deg);
top: 0;
}
}
}
.menu-icon {
padding: 28px 20px;
position: relative;
float: right;
cursor: pointer;
.nav-icon {
background: #333;
display: block;
height: 2px;
width: 18px;
position: relative;
transition:background .2s ease-out;
&:before {
background: #333;
content: "";
display: block;
height: 100%;
width: 100%;
position: absolute;
transition: all .2s ease-out;
top: 5px;
}
&:after {
background: #333;
content: "";
display: block;
height: 100%;
width: 100%;
position: absolute;
transition: all .2s ease-out;
top: -5px;
}
}
}
.menu {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-color: #fff;
color: #403e3f;
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
li {
a {
display: block;
padding: 20px;
border-right: 1px solid #aaa;
text-decoration: none;
}
}
}
}
#media (min-width: 48em) {
li {
float: left;
a {
padding: 20px 30px;
}
}
.menu {
clear: none;
float: right;
max-height: none;
}
.menu-icon {
display: none;
}
}
<header class="header">
<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>oplossingen</li>
<li>product</li>
<li>about</li>
</header>
You need to remove the max-height: 0;and max-height:250px set a height: auto;on the menu in the media query for the menu to show up in desktop.
Update I've revised the snippet, it works now.
body {
margin: 0;
background-color: #fff;
}
.header {
background-color: #fff;
position: fixed;
width: 100%;
z-index: 3;
}
.menu-btn {
display: none;
}
.menu-btn:checked ~
.menu {
height: auto;
}
.menu-btn:checked ~ .menu-icon .nav-icon {
background: transparent;
}
.menu-btn:checked ~ .menu-icon .nav-icon:before {
transform: rotate(-45deg);
top: 0;
}
.menu-btn:checked ~ .menu-icon .nav-icon:after {
transform: rotate(45deg);
top: 0;
}
.menu-icon {
padding: 28px 20px;
position: relative;
float: right;
cursor: pointer;
}
.nav-icon {
background: #333;
display: block;
height: 2px;
width: 18px;
position: relative;
transition: background .2s ease-out;
}
.nav-icon:before {
background: #333;
content: "";
display: block;
height: 100%;
width: 100%;
position: absolute;
transition: all .2s ease-out;
top: 5px;
}
.nav-icon:after {
background: #333;
content: "";
display: block;
height: 100%;
width: 100%;
position: absolute;
transition: all .2s ease-out;
top: -5px;
}
.menu {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-color: #fff;
color: #403e3f;
clear: both;
height: 0;
transition: height .2s ease-out;
}
.menu a {
display: block;
padding: 20px;
text-decoration: none;
}
#media screen and (min-width: 48em) {
.menu-icon {
display: none;
}
.menu {
float: right;
height: auto;
}
.menu li {
display: inline-block;
}
}
<header class="header">
<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>oplossingen</li>
<li>product</li>
<li>about</li>
</header>

missing css to fix this toggle switch, z-index issue?

This codepen has a yes / no toggle. the Yes doesn't display after the toggle has moved over it, but the No works? What css will get the Yes to show up?
https://codepen.io/trynn/pen/NWPNMdE
input[type="radio"].toggle {
display: none;
& + label{
cursor: pointer;
min-width: 60px;
border-radius: 30px;
&:hover{
background: none;
}
&:after{
background: blue;
content: "";
height: 100%;
position: absolute;
z-index:-1;
border-radius: 30px;
top: 0;
transition: left 200ms cubic-bezier(0.77, 0, 0.175, 1);
width: 100%;
}
}
&.toggle-left + label {
border-right: 0;
color: #fff;
&:after{
left: 100%;
}
}
&.toggle-right + label{
margin-left: -5px;
color: #fff;
&:after{
left: -100%;
}
}
&:checked + label {
cursor: default;
color: #fff;
transition: color 200ms;
&:after{
left: 0;
}
}
}
You added 2 blue bubbles for toggle-left and toggle-right since you only needed one of them moving from one to another. For your case, in order to not go over the 'yes', you should remove the :after in toggle-right. Try this:
.toggle-switch-container {
position: relative;
line-height: 32px;
border-radius: 30px;
width: fit-content;
margin-left: auto;
margin-right: auto;
margin-bottom:25px;
background-color: rgba(0, 0, 0, 1);
z-index:1;
}
.btn{
display: inline-block;
padding: 10px;
position: relative;
text-align: center;
transition: background 600ms ease, color 600ms ease;
z-index:100;
}
input[type="radio"].toggle {
display: none;
& + label{
cursor: pointer;
min-width: 60px;
border-radius: 30px;
&:hover{
background: none;
}
}
&.toggle-left + label {
border-right: 0;
color: #fff;
&:after{
background: blue;
content: "";
height: 100%;
position: absolute;
z-index:-1;
border-radius: 30px;
top: 0;
transition: left 200ms cubic-bezier(0.77, 0, 0.175, 1);
width: 100%;
left: 100%;
}
}
&.toggle-right + label{
margin-left: -5px;
color: #fff;
}
&:checked + label {
cursor: default;
color: #fff;
transition: color 200ms;
&:after{
left: 0;
}
}
}
For a simple explanation why this works: for 2 elements having the same z-index, the last element comes in front of the other. Your 2 toggle buttons had the same z-index, so their :after, so the toggle-right:after comes in front of toggle-left blocking the 'yes'. By removing the :after of toggle-right, you removed the element blocking the 'yes' solving the problem.
I think you are looking for this
body {
background-color: #ddd;
}
/*Style main div and remove default checkbox*/
.switch {
position: relative;
width: 75px;
margin: 0 auto;
}
.switch-checkbox {
display: none;
}
/*Style words and oval switch */
.switch-labels {
display: block;
overflow: hidden;
cursor: pointer;
border-radius: 20px;
}
.switch-text {
display: block;
width: 200%;
margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}
.switch-text:before,
.switch-text:after {
float: left;
width: 50%;
line-height: 30px;
color: white;
box-sizing: border-box;
}
.switch-text:before {
content: "ON";
padding-left: 10px;
background-color: #E1F6FF;
color: #000000;
}
.switch-text:after {
content: "OFF";
padding-right: 10px;
background-color: #4D5585;
color: #FFFFFF;
text-align: right;
}
/*Style center dot*/
.switch-dot {
width: 30px;
height: 30px;
background: #FFFFFF;
position: absolute;
top: 0;
bottom: 0;
right: 41px;
margin-right: 5px;
border-radius: 20px;
transition: all 0.3s ease-in 0s;
}
.switch-dot:after{
content: "";
position: absolute;
width: 20px;
height: 20px;
background-size: cover;
background-image: url('http://www.free-icons-download.net/images/multiply-icon-27981.png');
margin: 5px 0 0 5px;
}
/*State changer*/
.switch-checkbox:checked+.switch-labels .switch-text {
margin-left: 0;
}
.switch-checkbox:checked+.switch-labels .switch-dot {
right: 0px;
margin-right: 0px;
}
<div class="switch">
<input type="checkbox" name="switch" class="switch-checkbox" id="myswitch" checked>
<label class="switch-labels" for="myswitch">
<span class="switch-text"></span>
<span class="switch-dot"></span>
</label>
</div>
Using 2 text as on and off
.toggle-label {
position: relative;
display: block;
width: 300px;
height: 80px;
margin-top: 8px;
border: 1px solid #808080;
margin: 200px auto;
}
.toggle-label input[type=checkbox] {
opacity: 0;
position: absolute;
width: 100%;
height: 100%;
}
.toggle-label input[type=checkbox]+.back {
position: absolute;
width: 100%;
height: 100%;
background: #ed1c24;
transition: background 150ms linear;
}
.toggle-label input[type=checkbox]:checked+.back {
background: #00a651; /*green*/
}
.toggle-label input[type=checkbox]+.back .toggle {
display: block;
position: absolute;
content: ' ';
background: #fff;
width: 50%;
height: 100%;
transition: margin 150ms linear;
border: 1px solid #808080;
border-radius: 0;
}
.toggle-label input[type=checkbox]:checked+.back .toggle {
margin-left: 150px;
}
.toggle-label .label {
display: block;
position: absolute;
width: 50%;
color: #000;
line-height: 80px;
text-align: center;
font-size: 2em;
}
.toggle-label .label.on { left: 0px; }
.toggle-label .label.off { right: 0px; }
.toggle-label input[type=checkbox]:checked+.back .label.on {
color: #fff;
}
.toggle-label input[type=checkbox]+.back .label.off {
color: #000;
}
.toggle-label input[type=checkbox]:checked+.back .label.off {
color: #000;
}
<label class='toggle-label'>
<input type='checkbox'/>
<span class='back'>
<span class='toggle'></span>
<span class='label on'>ON</span>
<span class='label off'>OFF</span>
</span>
</label>

How to get sibling selector checking if a checkbox is checked in SASS working

I realized that I am not correctly stating the issue. The issue I'm having is when clicking on the hamburger the menu will not open. I think it might be how the sibling selectors are coded. If I display the checkbox in .cc_menu-btn and click that, then the menu opens. Am I missing something or is it my selectors?
.cc_headernav {
.cc_menu-btn {
display: none;
&:hover {
background-color: #f4f4f4;
}
}
.cc_menu-icon {
cursor: pointer;
display: inline-block;
float: right;
padding: 28px 20px;
position: relative;
user-select: none;
.navicon {
background: #009FAE;
display: block;
height: 4px;
position: relative;
transition: background .2s ease-out;
width: 30px;
&:before {
background: #009FAE;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
top: 9px;
}
&:after {
background: #009FAE;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
top: -9px;
}
}
}
ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-color: #fff;
}
.cc_menu {
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
li {
a {
display: block;
padding: 20px 20px;
border-right: 1px solid #f4f4f4;
text-decoration: none;
&:hover {
background-color: #f4f4f4;
}
}
}
}
}
// CSS Need to Make SASSY
.cc_menu-btn:checked ~ .cc_menu {
max-height: 240px;
position: absolute;
top: 60px;
right: 0;
z-index: 99;
box-shadow: 0 3px 8px #c0c0c0;
}
.cc_menu-btn:checked + .cc_menu-icon .navicon {
background: transparent;
}
.cc_menu-btn:checked + .cc_menu-icon .navicon:before {
transform: rotate(-45deg);
}
.cc_menu-btn:checked + .cc_menu-icon .navicon:after {
transform: rotate(45deg);
}
.cc_menu-btn:checked + .cc_menu-icon:not(.steps) .navicon:before,
.cc_menu-btn:checked + .cc_menu-icon:not(.steps) .navicon:after {
top: 0;
}
HTML/JSX:
<Column small={1} className="cc_headernav">
<input className="cc_menu-btn" type="checkbox" id="menu-btn" />
<label className="cc_menu-icon" for="cc_menu-btn"><span className="navicon"></span></label>
<ul className="cc_menu">
<li><Link name="Menu One" to="/MenuOne" onClick={this.changeTitle.bind(this)}>Menu One</Link></li>
<li><Link name="Menu Two" to="/MenuTwo" onClick={this.changeTitle.bind(this)}>Menu Two</Link></li>
<li><Link name="Menu Three" to="/Menu Three" onClick={this.changeTitle.bind(this)}>Menu Three</Link></li>
</ul>
</Column>
Any help is greatly appreciated!

Z-index issue using transform scale

I have a codepen below. Basically, I'm trying to show a popup on hover of the highlighted circles (red), however some highlighted circles are showing up above some of the popups, even when the popups are always given a higher z-index all the time.
http://codepen.io/Wolfmans55/pen/jPwKqZ
This is the animation used for the popup, which I believe maybe the culprit.
#-webkit-keyframes popup {
0% {
transform: scale(2.5);
}
100% {
transform: scale(0);
}
}
Take out the z-index setting on .white-popup and set a higher z-index on .white-popup:hover .popup and .white:hover.
see jsfiddle
#import url(http://fonts.googleapis.com/css?family=Roboto);
body,
html {
height: 100%;
}
body {
background: #343837;
transition: opacity .25s;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
overflow: hidden;
}
.show-body {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
.page {
background: #343837;
font-family: 'Roboto', sans-serif;
font-size: 100%;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: all 1s;
}
.page-2 {
left: auto;
right: -100%;
background: blue;
}
.prev-page,
.next-page {
position: absolute;
top: 50%;
width: 50px;
height: 50px;
background: red;
}
.next-page {
right: 20px;
}
.prev-page {
left: 20px;
}
.page-wrapper {
position: absolute;
top: 50%;
margin-top: -303px;
width: 100%;
}
.header_section {
text-shadow: 1px 1px 1px #000;
font-size: 2em;
}
h1 {
margin: 0;
}
.blue_title {
color: #54c8e7;
font-weight: normal;
}
.primary_title {
font-size: 4em;
margin-top: -34px;
margin-bottom: 20px;
}
.sub_title {
position: relative;
font-size: 1em;
background: #343837;
padding: 0 4px;
display: inline-block;
}
.sub_title_divider {
border-top: 1px solid #54c8e7;;
position: absolute;
top: 20px;
left: 0;
width: 100%;
}
.city-name {
font-size: 2em;
}
.emphasis {
font-weight: bold;
}
.inlineblock {
display: inline-block;
}
.centertxt {
text-align: center;
}
.pos_rel {
position: relative;
}
.overflow_hidden {
overflow: hidden;
}
.vert_mid {
vertical-align: middle;
}
table {
cursor: pointer;
margin: 0 auto;
border-spacing: 1px;
}
td {
width: 10px;
height: 10px;
border-radius: 50%;
}
.white,
.white-popup {
background: #000;
position: relative;
-webkit-animation: in .25s;
}
.white-popup {
background: red;
}
/*.plan-to {
background: #018c9e;
z-index: 2;
}*/
.white-popup .popup {
cursor: auto;
-webkit-animation: popup .25s forwards;
z-index: 10;
}
.popup {
position: absolute;
width: 100px;
height: 100px;
font-size: 5px;
overflow: hidden;
background: #54c8e7;
z-index:10;
top: -45px;
left: -45px;
padding: 8px;
border: 1px solid #343837;
border-radius: 3px;
box-sizing: border-box;
}
.white-popup:hover .popup {
-webkit-animation: out .25s forwards;
z-index: 50;
}
.white:hover {
-webkit-animation: out .25s forwards;
z-index: 50;
}
#-webkit-keyframes in {
from {background:#fff; transform: scale(1);}
to {background: #54c8e7; transform: scale(2.5);}
}
#-webkit-keyframes out {
0% {background:#fff; transform: scale(1);}
100% {background: #54c8e7; transform: scale(2.5);}
}
#-webkit-keyframes popup {
0% {
transform: scale(2.5);
}
100% {
transform: scale(0);
}
}
.key {
height: 15px;
width: 15px;
border-radius: 50%;
border: 1px solid #ccc;
margin-right: 2px;
}
.key_1 {
background: #54c8e7;
}
.key_2 {
background: #018c9e;
}
.key_3 {
background: #fff;
}
.legend {
text-transform:uppercase;
font-size: 12px;
color: #fff;
margin-bottom: 30px;
}
.legend_item {
margin-left: 15px;
}
#media screen and (min-width: 768px) {
.page-wrapper {
margin-top: -388px;
}
td {
width: 15px;
height: 15px;
}
}
I added the following CSS:
td:hover {
z-index: 1;
}
And inside .white-popup selector, I removed:
z-index: 2;
line.
Seems to work for me.

Resources