I am using Montana template on Wordpress and I have no idea why my dropdown menu is hide behind the main slider...
Here is the link of the test environment: http://evolutionescaperooms.com/dev/
Even if I put ul tag to z-index : 99999 or position : absolute, still doesn't work... But if you close and reopen the menu, the dropdown will be above the slider, without any reason...
Anyone got a quick fix please?
Thanks
This is an overflow issue not a z-index issue. The .navigation div has overflow: hidden; in its css. This is cropping any child elements that overflow its boundaries.
When you open and close the navigation it toggles the overflow to overflow: initial via Javascript. Hence why it only works after the menu is opened and closed.
Original CSS:
.navigation {
position: relative;
display: table;
overflow: hidden; /* Preventing overflowing popup menu from showing */
width: 100%;
margin-top: 40px;
transition: all 0.3s ease-in;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
-ms-transition: all 0.3s ease-in;
}
Update to:
.navigation {
position: relative;
display: table;
width: 100%;
margin-top: 40px;
transition: all 0.3s ease-in;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
-ms-transition: all 0.3s ease-in;
}
Related
I have an element that toggles between two classes when the user clicks on it. The two properties that change between classes are margin and background-color.
When I add transition to only one element, either one, the transition works well but when I use both transitions the background-color one does not work. I tried doing individual transitions for each property and combining both properties in one transition but I can't get it to work. When I disable the margin transition, the background-color transition works fine, but as soon as I enable the margin transition again, the background-color transition stops working.
This is my CSS:
.switch_Active {
background-color: $not_selected;
-webkit-transition: background-color 5000ms;
-moz-transition: background-color 5000ms;
-o-transition: background-color 5000ms;
transition: background-color 5000ms;
border-radius: 50%;
height: 20px;
margin-left: 45%;
transition: margin-left 0.5s ease;
width: 20px;
}
.switch {
background-color: $selected;
-webkit-transition: background-color 5000ms;
-moz-transition: background-color 5000ms;
-o-transition: background-color 5000ms;
transition: background-color 5000ms;
border-radius: 50%;
height: 20px;
margin-left: 50%;
transition: margin-left 0.5s ease;
width: 20px;
}
I tried looking up online but I couldn't find any limitations with the transitions. I appreciate any help I can get.
You can combine transitions:
transition: background-color 5000ms, margin-left 0.5s ease;
If you have 2 equal properties they will get overwritten. Also note that it isn't necessary to give the 2 classes the same transition unless you want different transition between going active and inactive.
To avoid overriding use this. Because CSS will basically takes the lastly defined property.
.switch_Active {
background-color: $not_selected;
-webkit-transition: background-color 5000ms, margin-left 0.5s ease;
-moz-transition: background-color 5000ms, margin-left 0.5s ease;
-o-transition: background-color 5000ms, margin-left 0.5s ease;
transition: background-color 5000ms, margin-left 0.5s ease;
border-radius: 50%;
height: 20px;
margin-left: 45%;
width: 20px;
}
.switch {
background-color: $selected;
-webkit-transition: background-color 5000ms, margin-left 0.5s ease;;
-moz-transition: background-color 5000ms, margin-left 0.5s ease;;
-o-transition: background-color 5000ms, margin-left 0.5s ease;;
transition: background-color 5000ms, margin-left 0.5s ease;;
border-radius: 50%;
height: 20px;
margin-left: 50%;
width: 20px;
}
or simply them like this:
.switch_Active {
background-color: $not_selected;
-webkit-transition: background-color, margin-left 0.5s ease;
-moz-transition: background-color, margin-left 0.5s ease;
-o-transition: background-color, margin-left 0.5s ease;
transition: background-color, margin-left 0.5s ease;
border-radius: 50%;
height: 20px;
margin-left: 45%;
width: 20px;
}
.switch {
background-color: $selected;
-webkit-transition: background-color, margin-left 0.5s ease;;
-moz-transition: background-color, margin-left 0.5s ease;;
-o-transition: background-color, margin-left 0.5s ease;;
transition: background-color, margin-left 0.5s ease;;
border-radius: 50%;
height: 20px;
margin-left: 50%;
width: 20px;
}
I have a button which is animated using :after and :hover:after CSS. Tried numerous ways to get it to work in IE but cannot find a work around. May be because the empty content:"", or the transition, but even without the transition is doesn't work. Any help / explanations is greatly appreciated.
button.bttnStyle1 {
background: none;
border: none;
font-size: 14rem;
text-transform: uppercase;
position: relative;
padding: 0rem;
cursor: pointer;
}
button.bttnStyle1:after,
button.bttnStyle1::after {
display: block;
position: absolute;
left: 0;
bottom: -5rem;
width: 3rem;
height: 3rem;
border-radius: 3rem;
content: "";
-o-transition: width 0.4s ease, height 2s ease-out;
-moz-transition: width 0.4s ease, height 2s ease-out;
-webkit-transition: width 0.4s ease, height 2s ease-out;
transition: width 0.4s ease, height 2s ease-out;
}
button.bttnStyle1:hover {}
button.bttnStyle1:hover:after,
button.bttnStyle1:hover::after {
width: 100%;
height: 2rem;
-o-transition: width 0.4s ease, height 2s ease-out;
-moz-transition: width 0.4s ease, height 2s ease-out;
-webkit-transition: width 0.4s ease, height 2s ease-out;
transition: width 0.4s ease, height 0.2s ease;
}
button.bttnStyle1:focus {
outline: none;
}
button.bttnColorGreen {
color: #69e0b1;
}
button.bttnColorGreen:after{
background-color:#69e0b1;
}
<button type="button" class="bttnStyle1 bttnColorGreen">BUTTON</button>
Codepen
Add overflow: visible; to your button. Found this solution here.
Solition:
CSS border radius need an actual border to be defined. Overflow also needed to be visible and everything works.
button.bttnStyle1:after,
button.bttnStyle1::after {
display: block;
position: absolute;
left: 0;
bottom: -5rem;
width: 0rem;
height: 0rem;
line-height:0;
border-radius:1rem;
content: "";
-o-transition: width 0.4s ease, height 2s ease-out;
-moz-transition: width 0.4s ease, height 2s ease-out;
-webkit-transition: width 0.4s ease, height 2s ease-out;
transition: width 0.4s ease, height 2s ease-out;
}
button.bttnColorGreen:after,
button.bttnColorGreen::after{
border:1rem solid #69e0b1;
background-color:#69e0b1;
}
I've added tabs to my site using CSS and according to this demo:
http://www.onextrapixel.com/examples/pure-css-tab-with-fade-animation/index4.html
However, chrome and firefox behave differently in regards to the animation.
Once you revisit a tab, firefox doesn't play the Fade-In animation again - chrome does.
How can I tell firefox to play the animation again?
JSFIDDLE: http://jsfiddle.net/h5W33/
important part:
.tabs label {
display: block;
padding: 10px 20px;
cursor: pointer;
position: relative;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
[id^=tab]:checked ~ [id^=tab-content], [id^=tab]:checked ~ [id^=tab-content] > div {
display: block;
}
On my site Im using a CSS3 hover fade for my submit button. It correctly fades on hover, but when I remove the curser from the button it quickly changes back to the original color, it doesn't seem to be doing the 1 second fade back out.
.form-wrapper input[type=submit] {background-color:#0076A9}
.form-wrapper input[type=submit]:hover{
background-color:#7daed3;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:ease}
UPDATE:
.social-links {
color:#0076A9;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:ease;}
.social-links:hover {
color:#7daed3;}
You need to use ease-in-out. See: http://css3generator.com/
-webkit-transition: background 1s ease-in-out;
-moz-transition: background 1s ease-in-out;
-ms-transition: background 1s ease-in-out;
-o-transition: background 1s ease-in-out;
transition: background 1s ease-in-out;
For the transition to effect ALL the properties, use (for social links):
.social-links a{
display: inline-block;
width: 43px;
height: 43px;
margin: 0 10px 10px 0;
color: #0076a9;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
Set the -webkit-transition-duration:1s; to the input without the hover in your css, like so:
.form-wrapper input[type=submit] {
background-color:#0076A9;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:ease;
}
.form-wrapper input[type=submit]:hover {
background-color:#7daed3;
}
Live example: http://jsfiddle.net/YgWYh/
Good Day
I am using the CSS transition effect on a hover selector, but the 2nd part of the transition is not smooth - When I hover over the element, it moves smoothly. When I exit hover, the element drops back non-elegantly (not smooth/timed). How do I fix it?
#login{
margin-top: -10px;
margin-left: 10px;
display: inline-block;
}
#login:hover {
margin-top: 0px;
-webkit-transition: margin-top 0.2s ease-out;
-moz-transition: margin-top 0.2s ease-out;
-o-transition: margin-top 0.2s ease-out;
-ms-transition: margin-top 0.2s ease-out;
}
#login a{
background: #003399;
font-size: 38px;
color: #fff;
}
<div id="login" class="span1">
login
</div>
NOTE: look at my JSFIDDLE to see what I mean
As soon as you leave the div the :hover pseudo class is no longer satisfied. Thus the div loses the transition properties.
Simply move the transition block from #login:hover to #login and you are done.
You have to define also transition to normal state.
Edit: Like Raffael said it is only necessary to define transition effect in normal state
#login{
margin-top: -10px;
margin-left: 10px;
display: inline-block;
-webkit-transition: margin-top 0.2s ease-out;
-moz-transition: margin-top 0.2s ease-out;
-o-transition: margin-top 0.2s ease-out;
-ms-transition: margin-top 0.2s ease-out;
}
#login:hover {
margin-top: 0px;
}
#login a{
background: #003399;
font-size: 38px;
color: #fff;
}
<div id="login" class="span1">
login
</div>
DEMO