I'm using a lightbox system on a page and I'm trying to get an image to go half inside the content of the lightbox and half above it - Like This
I've been editing some of the css to add z-index but that isnt helping.
Current HTML
<div class="nivo-lightbox-content"><div class="nivo-lightbox-inline" style="position: relative; top: 50%; margin-top: -281.95px;"><div id="s-b" style="" class="popuptxt">
<img src="https://example.com/b/wp-content/uploads/2022/05/s_b_popup.jpg" class="popupimg"><br>
<h3>SB</h3>
<h4>MD</h4>
<img loading="lazy" src="https://example.com/b/wp-content/uploads/2022/05/logo.png" width="65px" height="65px"><br>
Test Text<br>
all goes here.
</div></div></div><div class="nivo-lightbox-title-wrap"></div>
and CSS Code
.nivo-lightbox-overlay {
position: fixed;
top: 0;
left: 0;
z-index: 99998;
width: 100%;
height: 100%;
overflow: hidden;
visibility: hidden;
opacity: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.nivo-lightbox-overlay.nivo-lightbox-open {
visibility: visible;
opacity: 1;
}
.nivo-lightbox-wrap {
position: absolute;
top: 10%;
bottom: 10%;
left: 10%;
right: 10%;
}
.nivo-lightbox-content {
width: 100%;
height: 100%;
}
.nivo-lightbox-title-wrap {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
z-index: 99999;
text-align: center;
}
.nivo-lightbox-nav { display: none; }
.nivo-lightbox-prev {
position: absolute;
top: 50%;
left: 0;
}
.nivo-lightbox-next {
position: absolute;
top: 50%;
right: 0;
}
.nivo-lightbox-close {
position: absolute;
top: 2%;
right: 2%;
}
.nivo-lightbox-image { text-align: center; }
.nivo-lightbox-image img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
vertical-align: middle;
}
.nivo-lightbox-content iframe {
width: 100%;
height: 100%;
}
.nivo-lightbox-inline,
.nivo-lightbox-ajax {
max-height: 100%;
overflow: auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
/* https://bugzilla.mozilla.org/show_bug.cgi?id=308801 */
}
.nivo-lightbox-error {
display: table;
text-align: center;
width: 100%;
height: 100%;
color: #fff;
text-shadow: 0 1px 1px #000;
}
.nivo-lightbox-error p {
display: table-cell;
vertical-align: middle;
}
/* Effects
**********************************************/
.nivo-lightbox-notouch .nivo-lightbox-effect-fade,
.nivo-lightbox-notouch .nivo-lightbox-effect-fadeScale,
.nivo-lightbox-notouch .nivo-lightbox-effect-slideLeft,
.nivo-lightbox-notouch .nivo-lightbox-effect-slideRight,
.nivo-lightbox-notouch .nivo-lightbox-effect-slideUp,
.nivo-lightbox-notouch .nivo-lightbox-effect-slideDown,
.nivo-lightbox-notouch .nivo-lightbox-effect-fall {
-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;
}
/* fadeScale */
.nivo-lightbox-effect-fadeScale .nivo-lightbox-wrap {
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
-webkit-transform: scale(0.7);
-moz-transform: scale(0.7);
-ms-transform: scale(0.7);
transform: scale(0.7);
}
.nivo-lightbox-effect-fadeScale.nivo-lightbox-open .nivo-lightbox-wrap {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
/* slideLeft / slideRight / slideUp / slideDown */
.nivo-lightbox-effect-slideLeft .nivo-lightbox-wrap,
.nivo-lightbox-effect-slideRight .nivo-lightbox-wrap,
.nivo-lightbox-effect-slideUp .nivo-lightbox-wrap,
.nivo-lightbox-effect-slideDown .nivo-lightbox-wrap {
-webkit-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
-moz-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
-ms-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
-o-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
}
.nivo-lightbox-effect-slideLeft .nivo-lightbox-wrap {
-webkit-transform: translateX(-10%);
-moz-transform: translateX(-10%);
-ms-transform: translateX(-10%);
transform: translateX(-10%);
}
.nivo-lightbox-effect-slideRight .nivo-lightbox-wrap {
-webkit-transform: translateX(10%);
-moz-transform: translateX(10%);
-ms-transform: translateX(10%);
transform: translateX(10%);
}
.nivo-lightbox-effect-slideLeft.nivo-lightbox-open .nivo-lightbox-wrap,
.nivo-lightbox-effect-slideRight.nivo-lightbox-open .nivo-lightbox-wrap {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
.nivo-lightbox-effect-slideDown .nivo-lightbox-wrap {
-webkit-transform: translateY(-10%);
-moz-transform: translateY(-10%);
-ms-transform: translateY(-10%);
transform: translateY(-10%);
}
.nivo-lightbox-effect-slideUp .nivo-lightbox-wrap {
-webkit-transform: translateY(10%);
-moz-transform: translateY(10%);
-ms-transform: translateY(10%);
transform: translateY(10%);
}
.nivo-lightbox-effect-slideUp.nivo-lightbox-open .nivo-lightbox-wrap,
.nivo-lightbox-effect-slideDown.nivo-lightbox-open .nivo-lightbox-wrap {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
/* fall */
.nivo-lightbox-body-effect-fall .nivo-lightbox-effect-fall {
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
perspective: 1000px;
}
.nivo-lightbox-effect-fall .nivo-lightbox-wrap {
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
-webkit-transform: translateZ(300px);
-moz-transform: translateZ(300px);
-ms-transform: translateZ(300px);
transform: translateZ(300px);
}
.nivo-lightbox-effect-fall.nivo-lightbox-open .nivo-lightbox-wrap {
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
}
Any ideas what I'm missing?
I'm pretty sure it should just be a case of adding z-index to a couple of the classes but nothing seems to work - I just seem to be able to hide the image or move the image but not get it to display.
I have a hamburger menu and I would like to be able to place it to the right of the browser. I have added position absolute to both the hamburger icon and the main menu, however when I do this it leaves a weird gap on the right.
Here is my code
$(function () {
$("#hamburger").on("click", function () {
$(this).toggleClass("close");
$("#nav").toggleClass("visible");
});
});
.myHeader {
background: #2e3047;
}
#hamburger {
height: 50px;
width: 50px;
background: #3bba9c;
position: absolute;
overflow: hidden !important;
top: 20px;
right: 20px;
border-radius: 50%;
cursor: pointer;
box-shadow: 0 0 4px rgba(0, 0, 0, 0);
transition: all 0.2s ease;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2 ease;
z-index: 9999;
}
#hamburger:hover {
box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
transform: scale(1.1);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
transition: all 0.2s ease;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
}
#hamburger span {
display: block;
background-color: #2e3047;
position: absolute;
height: 2px;
width: 28px;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
border-radius: 10px;
transition: all 0.15s ease;
-webkit-transition: all 0.15s ease;
-moz-transition: all 0.15s ease;
}
#hamburger span:first-child {
top: 17px;
}
#hamburger span:nth-child(2) {
top: 25px;
}
#hamburger span:last-child {
top: 33px;
}
#hamburger.close {
top: 10px;
right: 10px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
#hamburger.close span:first-child {
top: 15px;
transform: translate(-14px, 10px) rotate(135deg);
-webkit-transform: translate(-14px, 10px) rotate(135deg);
-moz-transform: translate(-14px, 10px) rotate(135deg);
}
#hamburger.close span:nth-child(2) {
left: -20px;
opacity: 0;
}
#hamburger.close span:last-child {
top: 15px;
transform: translate(-14px, 10px) rotate(-135deg);
-webkit-transform: translate(-14px, 10px) rotate(-135deg);
-moz-transform: translate(-14px, 10px) rotate(-135deg);
}
#nav {
height: 100vh;
right: 0;
top: 0;
background: #3bba9c;
color: #2e3047;
width: 200px;
box-shadow: 0 1px 20px rgba(0, 0, 0, 0.25);
position: absolute;
overflow: hidden !important;
z-index: 1;
transform: translateX(200px);
-webkit-transform: translateX(200px);
-moz-transform: translateX(200px);
opacity: 0;
transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.15s ease-in-out;
}
#nav ul {
list-style: none;
padding: 0;
}
#nav ul li a {
display: block;
text-decoration: none;
padding: 20px;
color: #2e3047;
}
#nav ul li a:hover {
color: #fafbff;
}
#nav.visible {
transform: translateX(0);
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="myHeader">
<div id="hamburger" class="visible">
<span></span>
<span></span>
<span></span>
</div>
<div id="nav" class="close">
<ul>
<li>About</li>
<li>What I Do</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
I have tried adding overflow:hidden to both the hamburger icon and the nav menu but this doesn't seem to fix the problem.
I can't see any way of fixing this.
Add overflow-x: hidden to the body element. The problem is that the nav element has width - 200px - which is the exact width of horizontal scroll. Even though the nav is positioned absolute, and is out of the document flow, it doesn't take it out of the document calculation for width.
$(function() {
$("#hamburger").on("click", function() {
$(this).toggleClass("close");
$("#nav").toggleClass("visible");
});
});
/* ADDED */
body {
overflow-x: hidden;
}
.myHeader {
background: #2e3047;
}
#hamburger {
height: 50px;
width: 50px;
background: #3bba9c;
position: absolute;
overflow: hidden !important;
top: 20px;
right: 20px;
border-radius: 50%;
cursor: pointer;
box-shadow: 0 0 4px rgba(0, 0, 0, 0);
transition: all 0.2s ease;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2 ease;
z-index: 9999;
}
#hamburger:hover {
box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
transform: scale(1.1);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
transition: all 0.2s ease;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
}
#hamburger span {
display: block;
background-color: #2e3047;
position: absolute;
height: 2px;
width: 28px;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
border-radius: 10px;
transition: all 0.15s ease;
-webkit-transition: all 0.15s ease;
-moz-transition: all 0.15s ease;
}
#hamburger span:first-child {
top: 17px;
}
#hamburger span:nth-child(2) {
top: 25px;
}
#hamburger span:last-child {
top: 33px;
}
#hamburger.close {
top: 10px;
right: 10px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}
#hamburger.close span:first-child {
top: 15px;
transform: translate(-14px, 10px) rotate(135deg);
-webkit-transform: translate(-14px, 10px) rotate(135deg);
-moz-transform: translate(-14px, 10px) rotate(135deg);
}
#hamburger.close span:nth-child(2) {
left: -20px;
opacity: 0;
}
#hamburger.close span:last-child {
top: 15px;
transform: translate(-14px, 10px) rotate(-135deg);
-webkit-transform: translate(-14px, 10px) rotate(-135deg);
-moz-transform: translate(-14px, 10px) rotate(-135deg);
}
#nav {
height: 100vh;
right: 0;
top: 0;
background: #3bba9c;
color: #2e3047;
width: 200px;
box-shadow: 0 1px 20px rgba(0, 0, 0, 0.25);
position: absolute;
overflow: hidden !important;
z-index: 1;
transform: translateX(200px);
-webkit-transform: translateX(200px);
-moz-transform: translateX(200px);
opacity: 0;
transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.15s ease-in-out;
}
#nav ul {
list-style: none;
padding: 0;
}
#nav ul li a {
display: block;
text-decoration: none;
padding: 20px;
color: #2e3047;
}
#nav ul li a:hover {
color: #fafbff;
}
#nav.visible {
transform: translateX(0);
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="myHeader">
<div id="hamburger" class="visible">
<span></span>
<span></span>
<span></span>
</div>
<div id="nav" class="close">
<ul>
<li>About</li>
<li>What I Do</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
I am trying to make this effect touch-friendly. I have a thumbnail gallery that has titles and descriptions. The title is displayed on load, and when the user hovers over the thumbnail they see the longer description. Then they can click on the entire image to go to the linked page.
I have tried several options, like this one but none seem to work. I'd be fine if the hover acted as a touch to display caption info, and a second touch will open the link that is assigned to the image. Right now, the first touch displays the description for a half second, then follows the link.
I'm open to CSS or js options- I just need to get something to work!
.caption {
position: relative;
overflow: hidden;
/* Only the -webkit- prefix is required these days */
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.caption::before {
content: ' ';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: transparent;
transition: background .35s ease-out;
}
.caption:hover::before {
background: rgba(0, 0, 0, .5);
}
.caption__media {
display: block;
min-width: 100%;
max-width: 100%;
height: auto;
}
.caption__overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 10px;
color: white;
-webkit-transform: translateY(100%);
transform: translateY(100%);
transition: -webkit-transform .35s ease-out;
transition: transform .35s ease-out;
}
.caption:hover .caption__overlay {
-webkit-transform: translateY(0);
transform: translateY(0);
}
.caption__overlay__title {
-webkit-transform: translateY( -webkit-calc(-100% - 10px) );
transform: translateY( calc(-100% - 10px) );
transition: -webkit-transform .35s ease-out;
transition: transform .35s ease-out;
}
.caption:hover .caption__overlay__title {
-webkit-transform: translateY(0);
transform: translateY(0);
}
This is probably what you're looking for.
.hvrbox,
.hvrbox * {
box-sizing: border-box;
}
.hvrbox {
position: relative;
display: inline-block;
overflow: hidden;
max-width: 400px;
height: auto;
}
.hvrbox img {
max-width: 100%;
}
.hvrbox-text a {
text-decoration: none;
color: #ffffff;
font-weight: 700;
padding: 5px;
border: 2px solid #ffffff;
}
.hvrbox .hvrbox-layer_bottom {
display: block;
}
.hvrbox .hvrbox-layer_top {
opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
color: #fff;
padding: 15px;
-moz-transition: all 0.4s ease-in-out 0s;
-webkit-transition: all 0.4s ease-in-out 0s;
-ms-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.hvrbox:hover .hvrbox-layer_top,
.hvrbox.active .hvrbox-layer_top {
opacity: 1;
}
.hvrbox .hvrbox-text {
text-align: center;
font-size: 18px;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.hvrbox .hvrbox-text_mobile {
font-size: 15px;
border-top: 1px solid rgb(179, 179, 179);
/* for old browsers */
border-top: 1px solid rgba(179, 179, 179, 0.7);
margin-top: 5px;
padding-top: 2px;
display: none;
}
.hvrbox.active .hvrbox-text_mobile {
display: block;
}
.hvrbox .hvrbox-layer_slideup {
-moz-transform: translateY(100%);
-webkit-transform: translateY(100%);
-ms-transform: translateY(100%);
transform: translateY(100%);
}
.hvrbox:hover .hvrbox-layer_slideup,
.hvrbox.active .hvrbox-layer_slideup {
-moz-transform: translateY(0);
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
<div class="hvrbox">
<img src="https://picsum.photos/5760/3840?image=1067" alt="Mountains" class="hvrbox-layer_bottom">
<div class="hvrbox-layer_top hvrbox-layer_slideup">
<div class="hvrbox-text">Take me to Goolge</div>
</div>
</div>
I am new to web development.
I have a web application written in nodejs-html-css-js.
I have a text area, but I am unable to type or insert anything. It is embedded to a slide pop up. Here is the code.
.cd-panel-container h1{
color: #ffffff;
font-size: 15px;
font-weight: 200;
text-align: center;
position: absolute;
top: 25px;
right: 155px;
/*display: inline-block;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;*/
}
.cd-panel-container h1:before {
content:' ';
width: 120px;
display:block;
border:1.5px solid #00DED4;
border-radius:2px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
}
.post-textarea textarea {
width: 45%;
height: 200px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
font-size: 16px;
resize: none;
z-index: 999;
margin-top: 30%;
}
.cd-panel-close {
position: absolute;
top: 0;
right: 0;
height: 60px;
width: 60px;
/* image replacement */
display: inline-block;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
/*background: green;*/
}
.cd-panel-close::before, .cd-panel-close::after {
/* close icon created in CSS */
position: absolute;
top: 22px;
left: 20px;
height: 3px;
width: 20px;
background-color: #ffffff;
z-index: 1;
/* this fixes a bug where pseudo elements are slighty off position */
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.cd-panel-close::before {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.cd-panel-close::after {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.no-touch .cd-panel-close:hover {
background-color: transparent;
}
.no-touch .cd-panel-close:hover::before, .no-touch .cd-panel-close:hover::after {
background-color: #ffffff;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.no-touch .cd-panel-close:hover::before {
-webkit-transform: rotate(220deg);
-moz-transform: rotate(220deg);
-ms-transform: rotate(220deg);
-o-transform: rotate(220deg);
transform: rotate(220deg);
}
.no-touch .cd-panel-close:hover::after {
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
.cd-panel-container {
position: fixed;
width: 28%;
height: 87%;
top: 7%;
background: #33AAFF;
z-index: 1;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-delay: 0.3s;
-moz-transition-delay: 0.3s;
transition-delay: 0.3s;
margin-right: 477px;
}
.from-right .cd-panel-container {
right: 0;
-webkit-transform: translate3d(100%, 0, 0);
-moz-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
-o-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
.from-left .cd-panel-container {
left: 0;
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0);
-o-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
.is-visible .cd-panel-container {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
transition-delay: 0s;
}
/*#media only screen and (min-width: 768px) {
.cd-panel-container {
width: 70%;
}
}
#media only screen and (min-width: 1170px) {
.cd-panel-container {
width: 50%;
}
}
*/
.cd-panel-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 70px 5%;
overflow: auto;
/* smooth scrolling on touch devices */
-webkit-overflow-scrolling: touch;
}
.cd-panel-content p {
font-size: 14px;
font-size: 0.875rem;
color: #424f5c;
line-height: 1.4;
margin: 2em 0;
}
.cd-panel-content p:first-of-type {
margin-top: 0;
}
#media only screen and (min-width: 768px) {
.cd-panel-content p {
font-size: 16px;
font-size: 1rem;
line-height: 1.6;
}
}
<div class="cd-panel from-right">
<div class="cd-panel-container">
<h1>New Posts</h1>
<div class="cd-panel-content">
Close
</div> <!-- cd-panel-content -->
<div class="cd-panel-textarea">
<textarea class="post-textarea">What's happening?..</textarea>
</div><!--cd-panel-textarea-->
</div> <!-- cd-panel-container -->
<!-- <button class="click-post-btn">Post</button> -->
</div> <!-- cd-panel -->
In the above snippet, I am able to get the text area but I am not able to edit it.
However, if I insert a new CSS snippet, nothing is visible. Here is that snippet.
*::after, *::before {
content: '';
}
a {
color: #89ba2c;
text-decoration: none;
}
.cd-panel {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
visibility: hidden;
-webkit-transition: visibility 0s 0.6s;
-moz-transition: visibility 0s 0.6s;
transition: visibility 0s 0.6s;
}
.cd-panel::after {
/* overlay layer */
/*position: absolute;*/
/*top: 0;*/
/*left: 0;*/
/*width: 100%;*/
/*height: 100%;*/
/*background: transparent;*/
/*cursor: pointer;*/
/*-webkit-transition: background 0.3s 0.3s;*/
/*-moz-transition: background 0.3s 0.3s;*/
/*transition: background 0.3s 0.3s;*/
}
.cd-panel.is-visible {
visibility: visible;
-webkit-transition: visibility 0s 0s;
-moz-transition: visibility 0s 0s;
transition: visibility 0s 0s;
}
.cd-panel.is-visible::after {
background: rgba(0, 0, 0, 0.6);
/*background: #00bdff;*/
-webkit-transition: background 0.3s 0s;
-moz-transition: background 0.3s 0s;
transition: background 0.3s 0s;
}
.cd-panel.is-visible .cd-panel-close::before {
-webkit-animation: cd-close-1 0.6s 0.3s;
-moz-animation: cd-close-1 0.6s 0.3s;
animation: cd-close-1 0.6s 0.3s;
}
.cd-panel.is-visible .cd-panel-close::after {
-webkit-animation: cd-close-2 0.6s 0.3s;
-moz-animation: cd-close-2 0.6s 0.3s;
animation: cd-close-2 0.6s 0.3s;
}
#-webkit-keyframes cd-close-1 {
0%, 50% {
-webkit-transform: rotate(0);
}
100% {
-webkit-transform: rotate(45deg);
}
}
#-moz-keyframes cd-close-1 {
0%, 50% {
-moz-transform: rotate(0);
}
100% {
-moz-transform: rotate(45deg);
}
}
#keyframes cd-close-1 {
0%, 50% {
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
}
#-webkit-keyframes cd-close-2 {
0%, 50% {
-webkit-transform: rotate(0);
}
100% {
-webkit-transform: rotate(-45deg);
}
}
#-moz-keyframes cd-close-2 {
0%, 50% {
-moz-transform: rotate(0);
}
100% {
-moz-transform: rotate(-45deg);
}
}
#keyframes cd-close-2 {
0%, 50% {
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
}
The problem is, I will be needing both CSS snippets for reaching my goal.
Logic: I click a button, a slide pop up reveals with a text area. I want to type the text and the post gets saved in a calendar event.
However, I am not getting any results if I include the above attached code.
Any suggestions or solutions is greatly appreciated.
You can add position and z-index properties to the textarea to ensure they stack above .cd-panel-content
.cd-panel-container h1 {
color: #ffffff;
font-size: 15px;
font-weight: 200;
text-align: center;
position: absolute;
top: 25px;
right: 155px;
/*display: inline-block;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;*/
}
.cd-panel-container h1:before {
content: ' ';
width: 120px;
display: block;
border: 1.5px solid #00DED4;
border-radius: 2px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
}
.post-textarea textarea {
width: 45%;
height: 200px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
font-size: 16px;
resize: none;
z-index: 999;
margin-top: 30%;
}
.cd-panel-close {
position: absolute;
top: 0;
right: 0;
height: 60px;
width: 60px;
/* image replacement */
display: inline-block;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
/*background: green;*/
}
.cd-panel-close::before,
.cd-panel-close::after {
/* close icon created in CSS */
position: absolute;
top: 22px;
left: 20px;
height: 3px;
width: 20px;
background-color: #ffffff;
z-index: 1;
/* this fixes a bug where pseudo elements are slighty off position */
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.cd-panel-close::before {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.cd-panel-close::after {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.no-touch .cd-panel-close:hover {
background-color: transparent;
}
.no-touch .cd-panel-close:hover::before,
.no-touch .cd-panel-close:hover::after {
background-color: #ffffff;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.no-touch .cd-panel-close:hover::before {
-webkit-transform: rotate(220deg);
-moz-transform: rotate(220deg);
-ms-transform: rotate(220deg);
-o-transform: rotate(220deg);
transform: rotate(220deg);
}
.no-touch .cd-panel-close:hover::after {
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
.cd-panel-container {
position: fixed;
width: 28%;
height: 87%;
top: 7%;
background: #33AAFF;
z-index: 1;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-delay: 0.3s;
-moz-transition-delay: 0.3s;
transition-delay: 0.3s;
margin-right: 477px;
}
.from-right .cd-panel-container {
right: 0;
-webkit-transform: translate3d(100%, 0, 0);
-moz-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
-o-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
.from-left .cd-panel-container {
left: 0;
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0);
-o-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
.is-visible .cd-panel-container {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
transition-delay: 0s;
}
/*#media only screen and (min-width: 768px) {
.cd-panel-container {
width: 70%;
}
}
#media only screen and (min-width: 1170px) {
.cd-panel-container {
width: 50%;
}
}
*/
.cd-panel-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 70px 5%;
overflow: auto;
/* smooth scrolling on touch devices */
-webkit-overflow-scrolling: touch;
}
.cd-panel-content p {
font-size: 14px;
font-size: 0.875rem;
color: #424f5c;
line-height: 1.4;
margin: 2em 0;
}
.cd-panel-content p:first-of-type {
margin-top: 0;
}
#media only screen and (min-width: 768px) {
.cd-panel-content p {
font-size: 16px;
font-size: 1rem;
line-height: 1.6;
}
}
.cd-panel-textarea {
/* add this */
position: relative;
z-index: 100;
}
<div class="cd-panel from-right">
<div class="cd-panel-container">
<h1>New Posts</h1>
<div class="cd-panel-content">
Close
</div>
<!-- cd-panel-content -->
<div class="cd-panel-textarea">
<textarea class="post-textarea">What's happening?..</textarea>
</div>
<!--cd-panel-textarea-->
</div>
<!-- cd-panel-container -->
<!-- <button class="click-post-btn">Post</button> -->
</div>
<!-- cd-panel -->
Issue because you added .cd-panel-content with absolute position without z-index.. set z-index:- 1 for that
.cd-panel-container h1{
color: #ffffff;
font-size: 15px;
font-weight: 200;
text-align: center;
position: absolute;
top: 25px;
right: 155px;
/*display: inline-block;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;*/
}
.cd-panel-container h1:before {
content:' ';
width: 120px;
display:block;
border:1.5px solid #00DED4;
border-radius:2px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
}
.post-textarea textarea {
width: 45%;
height: 200px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
font-size: 16px;
resize: none;
z-index: 999;
margin-top: 30%;
}
.cd-panel-close {
position: absolute;
top: 0;
right: 0;
height: 60px;
width: 60px;
/* image replacement */
display: inline-block;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
/*background: green;*/
}
.cd-panel-close::before, .cd-panel-close::after {
/* close icon created in CSS */
position: absolute;
top: 22px;
left: 20px;
height: 3px;
width: 20px;
background-color: #ffffff;
z-index: 1;
/* this fixes a bug where pseudo elements are slighty off position */
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.cd-panel-close::before {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.cd-panel-close::after {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.no-touch .cd-panel-close:hover {
background-color: transparent;
}
.no-touch .cd-panel-close:hover::before, .no-touch .cd-panel-close:hover::after {
background-color: #ffffff;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.no-touch .cd-panel-close:hover::before {
-webkit-transform: rotate(220deg);
-moz-transform: rotate(220deg);
-ms-transform: rotate(220deg);
-o-transform: rotate(220deg);
transform: rotate(220deg);
}
.no-touch .cd-panel-close:hover::after {
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
.cd-panel-container {
position: fixed;
width: 28%;
height: 87%;
top: 7%;
background: #33AAFF;
z-index: 1;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-delay: 0.3s;
-moz-transition-delay: 0.3s;
transition-delay: 0.3s;
margin-right: 477px;
}
.from-right .cd-panel-container {
right: 0;
-webkit-transform: translate3d(100%, 0, 0);
-moz-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
-o-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
.from-left .cd-panel-container {
left: 0;
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0);
-o-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
.is-visible .cd-panel-container {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
transition-delay: 0s;
}
/*#media only screen and (min-width: 768px) {
.cd-panel-container {
width: 70%;
}
}
#media only screen and (min-width: 1170px) {
.cd-panel-container {
width: 50%;
}
}
*/
.cd-panel-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 70px 5%;
overflow: auto;
/* smooth scrolling on touch devices */
-webkit-overflow-scrolling: touch;
z-index: -1;
}
.cd-panel-content p {
font-size: 14px;
font-size: 0.875rem;
color: #424f5c;
line-height: 1.4;
margin: 2em 0;
}
.cd-panel-content p:first-of-type {
margin-top: 0;
}
#media only screen and (min-width: 768px) {
.cd-panel-content p {
font-size: 16px;
font-size: 1rem;
line-height: 1.6;
}
}
<div class="cd-panel from-right">
<div class="cd-panel-container">
<h1>New Posts</h1>
<div class="cd-panel-content">
Close
</div> <!-- cd-panel-content -->
<div class="cd-panel-textarea">
<textarea class="post-textarea">What's happening?..</textarea>
</div><!--cd-panel-textarea-->
</div> <!-- cd-panel-container -->
<!-- <button class="click-post-btn">Post</button> -->
</div> <!-- cd-panel -->
**you can make your text area editable by removing Width and height which you have set to 100% in cd-panel-content class **
.cd-panel-container h1{
color: #ffffff;
font-size: 15px;
font-weight: 200;
text-align: center;
position: absolute;
top: 25px;
right: 155px;
/*display: inline-block;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;*/
}
.cd-panel-container h1:before {
content:' ';
width: 120px;
display:block;
border:1.5px solid #00DED4;
border-radius:2px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
}
.post-textarea textarea {
width: 45%;
height: 200px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
font-size: 16px;
resize: none;
z-index: 999;
margin-top: 30%;
}
.cd-panel-close {
position: absolute;
top: 0;
right: 0;
height: 60px;
width: 60px;
/* image replacement */
display: inline-block;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
/*background: green;*/
}
.cd-panel-close::before, .cd-panel-close::after {
/* close icon created in CSS */
position: absolute;
top: 22px;
left: 20px;
height: 3px;
width: 20px;
background-color: #ffffff;
z-index: 1;
/* this fixes a bug where pseudo elements are slighty off position */
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.cd-panel-close::before {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.cd-panel-close::after {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.no-touch .cd-panel-close:hover {
background-color: transparent;
}
.no-touch .cd-panel-close:hover::before, .no-touch .cd-panel-close:hover::after {
background-color: #ffffff;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.no-touch .cd-panel-close:hover::before {
-webkit-transform: rotate(220deg);
-moz-transform: rotate(220deg);
-ms-transform: rotate(220deg);
-o-transform: rotate(220deg);
transform: rotate(220deg);
}
.no-touch .cd-panel-close:hover::after {
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
.cd-panel-container {
position: fixed;
width: 28%;
height: 87%;
top: 7%;
background: #33AAFF;
z-index: 1;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-delay: 0.3s;
-moz-transition-delay: 0.3s;
transition-delay: 0.3s;
margin-right: 477px;
}
.from-right .cd-panel-container {
right: 0;
-webkit-transform: translate3d(100%, 0, 0);
-moz-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
-o-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
.from-left .cd-panel-container {
left: 0;
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0);
-o-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
.is-visible .cd-panel-container {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
transition-delay: 0s;
}
/*#media only screen and (min-width: 768px) {
.cd-panel-container {
width: 70%;
}
}
#media only screen and (min-width: 1170px) {
.cd-panel-container {
width: 50%;
}
}
*/
.cd-panel-content {
position: absolute;
top: 0;
left: 0;
padding: 70px 5%;
overflow: auto;
/* smooth scrolling on touch devices */
-webkit-overflow-scrolling: touch;
}
.cd-panel-content p {
font-size: 14px;
font-size: 0.875rem;
color: #424f5c;
line-height: 1.4;
margin: 2em 0;
}
.cd-panel-content p:first-of-type {
margin-top: 0;
}
#media only screen and (min-width: 768px) {
.cd-panel-content p {
font-size: 16px;
font-size: 1rem;
line-height: 1.6;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cd-panel from-right">
<div class="cd-panel-container">
<h1>New Posts</h1>
<div class="cd-panel-content">
Close
</div> <!-- cd-panel-content -->
<div class="cd-panel-textarea">
<textarea class="post-textarea">What's happening?..</textarea>
</div><!--cd-panel-textarea-->
</div> <!-- cd-panel-container -->
<!-- <button class="click-post-btn">Post</button> -->
</div> <!-- cd-panel -->
When I'm hovering specific menu option, then submenu options are blocked by slideshow element. Please refer below screenshot
Highlighted in red color submenu option is blocked by slideshow. When I changed z-index value for slideshow div to negative value then it is totally disappeared otherwise it is blocking submenu.
Please let me know, if any additional information required.
Menu.css
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
ul:after, header:after, #main:after {
clear: both;
content: "";
display: table;
}
ul:before, header:before, #main:before {
content: "";
display: table;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
body {
font-family: "Raleway";
font-weight: 400;
color: #34495E;
background: #f0f0f0;
}
header {
background: #2d3f51;
padding: 0 7%;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
box-shadow: 0 2px 5px rgba(68, 68, 68, 0.3);
-webkit-perspective: 1555px;
-moz-perspective: 1555px;
perspective: 1555px;
}
#main {
padding: 2.5em 7%;
}
#main .efx-info {
width: 49%;
float: left;
padding: 2em 1em;
font-weight: 700;
border-radius: .2em;
}
#main .efx-info h1 {
line-height: 1;
display: inline-block;
padding: .1em .2em;
font-size: 5em;
margin: 0;
background: #e3e3e3;
}
#main .efx-info p {
margin: 0;
}
#main #efx-name {
color: #16A085;
font-weight: 900;
border-bottom: 4px solid #f5f5f5;
}
#main #efx-ease {
color: #34495E;
}
#main .menu-chks {
position: relative;
line-height: 1;
font-size: .9em;
width: 45%;
float: right;
}
#main .menu-chks input {
margin-right: .5em;
}
#main .menu-chks input:checked + span {
color: #16A085;
}
#main .menu-chks input:checked + span:before {
content: "\f046";
}
#main .menu-chks span {
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
transition: all 0.2s ease;
}
#main .menu-chks span:before {
font-family: 'FontAwesome';
position: absolute;
left: 12px;
top: 10px;
color: #3b536b;
content: "\f096";
font-size: 1.4em;
}
#main .menu-chks label {
color: #e8e8e8;
font-weight: 600;
display: inline-block;
position: relative;
margin: .25em;
background: #2d3f51;
padding: .8em 1.2em .8em 2.5em;
border-radius: .4em;
}
#main .menu-chks label:hover {
cursor: pointer;
}
nav li {
position: relative;
display: inline-block;
float: left;
}
nav a {
position: relative;
/*z-index: 599;*/
color: #f5f5f5;
background: #2d3f51;
text-decoration: none;
display: block;
padding: 1.5em;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
transition: all 0.2s ease;
}
nav a i[class*="caret"] {
color: #3b536b;
margin-left: .15em;
}
nav a:hover {
color: #16A085;
}
nav a:hover + .submenu {
opacity: 1;
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
transform: rotateX(0deg);
visibility: visible;
}
nav .eiob .submenu {
-webkit-transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.2s linear;
-moz-transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.2s linear;
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.2s linear;
}
nav .ln .submenu {
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
transition: all 0.3s linear;
}
nav .ei .submenu {
-webkit-transition: all 0.3s ease-in, opacity 0.2s linear;
-moz-transition: all 0.3s ease-in, opacity 0.2s linear;
transition: all 0.3s ease-in, opacity 0.2s linear;
}
nav .eo .submenu {
-webkit-transition: all 0.3s ease-out, opacity 0.2s linear;
-moz-transition: all 0.3s ease-out, opacity 0.2s linear;
transition: all 0.3s ease-out, opacity 0.2s linear;
}
nav .submenu {
display: block;
opacity: 0;
position: absolute;
visibility: hidden;
/* z-index: 499;*/
width: 14em;
top: 100%;
left: 0;
background: #2d3f51;
box-shadow: 0 2px 5px rgba(68, 68, 68, 0.3);
-webkit-transform-origin: top center;
-moz-transform-origin: top center;
-ms-transform-origin: top center;
-o-transform-origin: top center;
transform-origin: top center;
-webkit-transform: rotateX(-90deg);
-moz-transform: rotateX(-90deg);
-ms-transform: rotateX(-90deg);
-o-transform: rotateX(-90deg);
transform: rotateX(-90deg);
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
transition: all 0.25s ease;
}
nav .submenu li > .submenu {
top: 0;
left: 100%;
}
nav .submenu:hover {
opacity: 1;
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
transform: rotateX(0deg);
visibility: visible;
}
nav .submenu li {
float: none;
display: block;
}
nav .submenu a {
width: 100%;
display: block;
font-weight: 300;
padding: 1.4em 2em;
}
nav .submenu a:hover {
color: #f5f5f5;
background: #14957c;
}
nav.rx li:hover + .submenu {
opacity: 1;
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
}
nav.rx .submenu {
-webkit-transform: rotateY(-90deg);
-moz-transform: rotateY(-90deg);
-ms-transform: rotateY(-90deg);
-o-transform: rotateY(-90deg);
transform: rotateY(-90deg);
}
nav.rx .submenu:hover {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
}
/*=== Fade Dwn ===*/
nav.fd li:hover + .submenu {
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
nav.fd .submenu {
-webkit-transform-origin: center center;
-moz-transform-origin: center center;
-ms-transform-origin: center center;
-o-transform-origin: center center;
transform-origin: center center;
-webkit-transform: translateY(-50px);
-moz-transform: translateY(-50px);
-ms-transform: translateY(-50px);
-o-transform: translateY(-50px);
transform: translateY(-50px);
}
nav.fd .submenu:hover {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
nav.fu li:hover + .submenu {
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
nav.fu .submenu {
-webkit-transform-origin: center center;
-moz-transform-origin: center center;
-ms-transform-origin: center center;
-o-transform-origin: center center;
transform-origin: center center;
-webkit-transform: translateY(20px);
-moz-transform: translateY(20px);
-ms-transform: translateY(20px);
-o-transform: translateY(20px);
transform: translateY(20px);
}
nav.fu .submenu:hover {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
/*=== Scale ===*/
nav.sc li:hover + .submenu {
opacity: 1;
-webkit-transform: rotateY(0deg) scale(1);
-moz-transform: rotateY(0deg) scale(1);
-ms-transform: rotateY(0deg) scale(1);
-o-transform: rotateY(0deg) scale(1);
transform: rotateY(0deg) scale(1);
}
nav.sc .submenu {
-webkit-transform-origin: center top;
-moz-transform-origin: center top;
-ms-transform-origin: center top;
-o-transform-origin: center top;
transform-origin: center top;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
}
nav.sc .submenu:hover {
-webkit-transform: rotateY(0deg) scale(1);
-moz-transform: rotateY(0deg) scale(1);
-ms-transform: rotateY(0deg) scale(1);
-o-transform: rotateY(0deg) scale(1);
transform: rotateY(0deg) scale(1);
}
/*==== Rotate ====*/
nav.rt li:hover + .submenu {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
nav.rt .submenu {
-webkit-transform-origin: center center;
-moz-transform-origin: center center;
-ms-transform-origin: center center;
-o-transform-origin: center center;
transform-origin: center center;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
nav.rt .submenu:hover {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
/*==== Move/Skew In ====*/
nav.mv li:hover + .submenu {
-webkit-transform: translateX(0px) skewX(0deg);
-moz-transform: translateX(0px) skewX(0deg);
-ms-transform: translateX(0px) skewX(0deg);
-o-transform: translateX(0px) skewX(0deg);
transform: translateX(0px) skewX(0deg);
}
nav.mv .submenu {
-webkit-transform-origin: center center;
-moz-transform-origin: center center;
-ms-transform-origin: center center;
-o-transform-origin: center center;
transform-origin: center center;
-webkit-transform: translateX(-40px) skewX(-7deg);
-moz-transform: translateX(-40px) skewX(-7deg);
-ms-transform: translateX(-40px) skewX(-7deg);
-o-transform: translateX(-40px) skewX(-7deg);
transform: translateX(-40px) skewX(-7deg);
}
nav.mv .submenu:hover {
-webkit-transform: skewX(0deg);
-moz-transform: skewX(0deg);
-ms-transform: skewX(0deg);
-o-transform: skewX(0deg);
transform: skewX(0deg);
}
/*==== Door ====*/
nav.dc li:hover + .submenu {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
}
nav.dc .submenu {
-webkit-transform-origin: left top;
-moz-transform-origin: left top;
-ms-transform-origin: left top;
-o-transform-origin: left top;
transform-origin: left top;
-webkit-transform: rotateY(-90deg);
-moz-transform: rotateY(-90deg);
-ms-transform: rotateY(-90deg);
-o-transform: rotateY(-90deg);
transform: rotateY(-90deg);
}
nav.dc .submenu:hover {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
}
index.html
<!DOCTYPE html>
<!--[if lte IE 9 ]><html class="ie lt-ie9" lang="en-US"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en-US"> <!--<![endif]-->
<head>
<meta charset='UTF-8'>
<script src="js/modernizr.js" type="text/javascript"></script>
<link href="css/font-awesome.min.css" rel="stylesheet">
<link rel='stylesheet prefetch' href='css/normalize.css'>
<link rel='stylesheet' href='css/menu.css'>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel='stylesheet' id='flatsome-css-minified-css' href='css/flatsome.min.css' type='text/css' media='all' />
</head>
<body>
<header >
<nav id="nav" class="ry" >
<ul id="main-menu" >
<li>
<i class="fa fa-home"></i> Home
</li>
<li>
<i class="fa fa-user"></i> About <i class="fa fa-caret-down"></i>
<ul class="submenu">
<li>Meet the Team</li>
<li>Careers</li>
<li>
More Items <i class="fa fa-caret-right"></i>
<ul class="submenu">
<li>A Sub-Item</li>
<li>
A Sub-Item
</li>
<li>
A Sub-Item
</li>
</ul>
</li>
</ul>
</li>
<li>
<i class="fa fa-shopping-cart"></i> Our Books <i class="fa fa-caret-down"></i>
<ul class="submenu">
<li>Lorem</li>
<li>Aliquam</li>
<li>Vestibulum</li>
<li>Ipsum</li>
<li>Consectetur</li>
</ul>
</li>
<li>
<i class="fa fa-comment"></i> Contact Us
</li>
</ul>
</nav>
</header>
<div id="wrapper" class="box-shadow" >
<div class="header-wrapper before-sticky">
</div><!-- .header-wrapper -->
<div id="main-content" class="site-main hfeed light">
<!-- woocommerce message -->
<div id="content" role="main">
<div class="ux-slider-wrapper relative" >
<div class="ux-slider iosSlider hide-for-small slider-style-normal slider-nav-dark slider-nav-inside slider-nav-circle js-flickity"
data-flickity-options='{
"cellAlign": "center",
"imagesLoaded": true,
"lazyLoad": 1,
"freeScroll": false,
"wrapAround": true,
"autoPlay": 6000,
"prevNextButtons": true,
"contain" : true,
"percentPosition": true,
"pageDots": true,
"selectedAttraction" : 0.1,
"friction": 0.6,
"rightToLeft": false,
"draggable": true }'
style=""
>
<div id="banner_1261757255" class="ux_banner dark " style="height:325px; " data-height="325px" role="banner">
<a href="http://xxxxx.com/up-board-books/" > <div class="banner-bg " style="background-image:url('http://www.natgen.org/wp-content/uploads/2015/07/bar2.png'); "><img src="images/uttar-pradesh-book-Banner.jpg" alt="" style="visibility:hidden;" /></div>
<div class="banner-effect effect-sparkle"></div>
<div class="row" >
<div class="inner center text-center " style="width:60%;">
<div class="inner-wrap animated fadeIn" style=" ">
</div>
</div>
</div>
</a> </div><!-- end .ux_banner -->
<div id="banner_219276103" class="ux_banner dark " style="height:325px; " data-height="325px" role="banner">
<a href="http://xxxxx.com/product-category/competition-books/magazines/" > <div class="banner-bg " style="background-image:url('images/current-affairs.jpg'); "><img src="images/current-affairs.jpg" alt="" style="visibility:hidden;" /></div>
<div class="banner-effect effect-sparkle"></div>
<div class="row" >
<div class="inner center text-center " style="width:60%;">
<div class="inner-wrap animated fadeIn" style=" ">
</div>
</div>
</div>
</a> </div><!-- end .ux_banner -->
</div>
<div class="ux-loading dark"></div>
</div><!-- .ux-slider-wrapper -->
</div>
</div><!-- #main-content -->
</div><!-- #wrapper -->
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/flatsome.min.js'></script>
</body></html>
You must try z- index for sub menu.
It's hard to make anything up from only your CSS without HTML, but it looks like your z-index is just not high enough. A higher (positive) z-index brings an element to front, a negative z-index brings an element further back. Remember that z-index only works with positioned elements. I see that your submenu is positioned absolute, to that shouldn't be a problem. What is the z-index of your slideshow? Is this generated with JavaScript, setting a very high z-index? Try setting the z-index of your submenu to a very high number (9999999 or so) and see what happens.
Edit: I see your HTML now. Just try to increase your z-index to a very high number and see what happens. Everything else looks alright to me.