in my header I have a dropdown menu (green) that interferes with a sticky header (purple).
Sticky header is above the dropdown menu, so when I try to hover the different element of the dropdown menu, I lose it when it goes on the sticky header.
So for me this was an obvious z-index issue to be resolved with CSS, so I've tried:
#regularMenu .hasDrop ul.site-nav__dropdown {
z-index: 9999 !important;
}
#prodForm.prod_form.prod_form_footer.sticky_addcart {
z-index: 1000 !important;
}
But it doesn't work for some reason
I've also tried these other selectors for the dropdown menu, without success:
#regularMenu .hasDrop ul
.hasDrop ul
If you want to test it by yourself, this is one of the URL product pages where I encounter my issue:
https://www.tresor-ethnique.com/products/collier-yin-et-yang
Any idea would be greatly appreciated, a huge thanks in advance :)
Pascal
try this.
This is your css now
header {
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
width: 100%;
border-bottom: 1px solid transparent;
position: relative;
z-index: 999;
}
just change the z-index value to 9999;
header {
z-index: 9999;
}
Related
I´m trying to build up a new site. The work is nearly done, but I need a last detail. I´m using a grid with thumb/headline and link-function to detail sites.
I want to visualize the link-function with some hover-effects (delivered by my template).
This is the link to the project-site - and I´m looking for help on my mainpage:
https://emc.ow-media.de/
If you hover the thumb of the document or the thumbs of the three links at the end of the page, you can see a hover effect. I want to use this effect also on the grid element at the top (the 6 thumbs).
Can you give me a hint, how to get this working with CSS?
Thanks a lot!
You have sample already there. If you inspect the element, you can see how it works. The code the bottom elements use is as follows:
CSS:
figure.sc_image a {
content: '';
width: 100%;
display: block;
height: 100%;
top: 0;
left: 0;
opacity: 0;
position: absolute;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
figure.sc_image a {
background-color: rgba(50,172,121,0.8) !important;
}
figure.sc_image a:hover {
opacity: 1;
}
HTML:
<figure class="sc_image sc_image_shape_square">
<img src="https://emc.ow-media.de/wp-content/uploads/2021/06/Leistungen-Potentialanalyse1.jpg" alt="">
<a class="img_icon icon-file-pdf" href="http://emc.ow-media.de/was-wir-tun-detail"></a>
</figure>
Essentially what is happening, is that there is an invisible element a, with set opacity of 0. When someone hovers the element it gets to set the opacity of 1. The animation is done by the transition property, which eases the change of opacity. You can mimic the effect on your other elements.
Sorry, I'm not a professional developer and therefore not in the right place here. I really try to get along with Wordpress and CSS but I couldn't find help regarding one specific problem that's why I reach out to you here: I would like to add a fly-out sub menu on this page: https://mkwtest354675275.wpcomstaging.com/
Could anyone here help me out please? Any advice would be highly appreciated! Thank you so much!
Kind regards, Alena
Add following css for fly-out sub menu in your site (modify as per your need)
ul.sub-menu {
display: none;
}
#menu-hauptmenue li:hover .sub-menu {
display: block;
position: absolute;
background-color: pink;
top: 1%;
left: 18%;
min-width: 200px;
z-index: 6;
-webkit-transition: left 200ms ease-in;
-moz-transition: left 200ms ease-in;
-ms-transition: left 200ms ease-in;
transition: left 200ms ease-in;
padding-left: 10px;
}
I have a form that changes border color(red-green) if the inputted values are correct or not - I also change between two small icons (glyphicon-ok and glyphicon-remove) at the end of each field.
I wanted to add a transition effect on the border color and icons(ease-in-out).
On the border color works perfectly but I noticed on the icons even though I set 'ease-in-out' the very first transition it's still 'linear' - the icons come in from the bottom like something pushes them up - I want them just to simply appear with a 0.2s transition.
Here is my css for the icons:
.start-label .glyphicon-ok {
position: absolute;
font-size: 25px;
top: 19px;
right: 10px;
color: #ACCB71;
transition: 0.2s ease-in-out;
}
.start-label .glyphicon-remove {
position: absolute;
font-size: 25px;
top: 19px;
right: 10px;
color: #CC3E44;
transition: 0.2s ease-in-out;
}
I have only these transitions in my entire css code with the border ones.
The transition for the border is the following:
transition: border 0.2s ease-in-out;
What am I doing wrong here? Or this is how it supposed to work?
Thanks to Dorvalla's help I resolved it by specifying the transition on the color.
From:
transition: 0.2s ease-in-out;
To:
transition: color 0.2s ease-in-out;
I am trying to scale up a linked image and reduce the opacity on hover. I have the image in a container to make it a circle with border-radius and the container has overflow set to hidden. I have everything working except that when I hover, the full image appears for a brief second before the overflow is hidden again. Here is a codepen mockup: http://codepen.io/jphogan/pen/WbxKJG
I have tried a few of the solutions I've found on here including setting the image to display:block. I've also tried setting the background color and overflow hidden to the container rather than the link, but I had the same result. I tried adding overflow hidden to the image itself, though unsurprisingly that did nothing. I just need the excess of the image to stay hidden throughout the transition.
Here is the CSS the way I have it set up now, although I've gone through a number of iterations to try and solve this. I appreciate any help. Thanks!
.solutions_role_container {
text-align:center;
}
.role_img_container {
width: 70%;
margin: 0 auto;
}
a.solutions_role_image {
background:#000;
border-radius: 50%;
overflow: hidden;
display: block;
border: 1px solid #B1C3DA;
box-shadow: 0 4px 10px #C6C6C6;
}
.solutions_role_image img {
width:100%;
-moz-transition: opacity 0.4s ease-in-out, transform 0.2s ease-in-out;
-o-transition: opacity 0.4s ease-in-out, transform 0.2s ease-in-out;
-webkit-transition: opacity 0.4s ease-in-out, transform 0.2s ease-in-out;
transition: opacity 0.4s ease-in-out, transform 0.2s ease-in-out;
display:block;
overflow:hidden;
transform:scale(1);
}
a.solutions_role_image:hover img {
opacity:0.7;
transform:scale(1.08);
}
Add these rules to role_img_container:
border-radius: 50%;
overflow: hidden;
z-index: 2;
position: relative;
The a and img tags should no longer need any css for overflow or border radius. You could add z-index: 1 to solutions_role_img just to be safe, but I don't think it is necessary
First stackoverflow post, so please forgive if I'm missing something obvious. I did search for an answer first but didn't find one I recognized as relevant.
In this jsfiddle, I have a div that I'm using as a hover target to get some transitions to happen to an <a> element.
http://jsfiddle.net/ramatsu/Q9rfg/
Here's the markup:
<div class="target">Target
<p>.LightMe</p>
</div>
And the css:
body {
background-color: #099;
height: 100%;
width: 100%;
margin-top:200px;
}
.target{
position: absolute;
left: 40%;
height: 100px;
width: 200px;
padding: 20px;
background-color: #ccc;
cursor: pointer;
}
a {
display: block;
position: relative;
padding: 1px;
border-radius: 15%;
}
a.LightMe {
/*Starting state */
background-color: white;
border-style:solid;
border-color:#fff;
top: -120px;
left: -200px;
height: 80px;
width: 80px;
z-index: 10;
opacity: 0;
transition:left 0.55s ease, opacity .5s .7s ease;
-webkit-transition:left 0.55s ease, opacity .5s .7s ease;
-o-transition:left 0.55s ease, opacity .5s .7s ease;
}
.target:hover a.LightMe {
/*Ending state*/
left: 80px;
opacity: 1;
transition:left 0.55s .7s ease, opacity .5s ease;
-webkit-transition:left 0.55s .7s ease, opacity .5s ease;
-o-transition:left 0.55s .7s ease, opacity .5s ease;
}
.target:hover {
transition: background-color 500ms ease;
-webkit-background-color 500ms ease;
-o-background-color 500ms ease;
background-color:#999;
}
Hover over the grey box labeled Target and back off again to see the transitions on the <a> element. It's doing what I want: opacity fades in during position delay, then it slides to the desired position. when moving out of the hover target, the <a> slides to it's original position, then opacity fades back out. All good so far.
The catch is, if the user hovers over the hidden <a> element, it triggers the same set of transitions, which causes all kinds of unintended havoc.
I'd like to prevent any response to a hover directly over the <a> element, and really like to continue to keep it in css if possible.
I tried adding an explicit hover to <a> and .LightMe to override this, to no avail. (Though that could be that I just didn't get the selector syntax right.)
I added the background-color transition to .target intentionally for testing, and it provided an interesting clue: hovering over the <a> triggers the upstream transitions of the .target div. That's about where my brain broke and I decided I'd better seek help.
I'm working with a few things here that are above my head, I just started from the closest thing I could find and worked toward what I needed. This was the starting point jsfiddle (with thanks to the author):
You can start your 'top' position outside of the viewer port and delay the 'top' transition until after your 'left' transition is over. That way the <a> element will not be clickable until the left transition start.
See: http://jsfiddle.net/Q9rfg/4/
Or you can also use this method, combined with the sibling selector as suggested by aorcsik.
Update: another hacky solution is to place a div which is outside, the hover sensitive element, that covers the moving link. Check it out: http://jsfiddle.net/aorcsik/Q9rfg/2/
The problem with my original idea (below) was, that you could not click on the moving link, since it returned to its original position, once you hovered out of the gray box, also the cursor changed over the hidden link.
I would try to get the <a> out of the gray box, put it after, and reference it in css with the sibling selector +.
.mainclass.subclass:hover + a.LightMe {
/* ... */
}
This way it won't trigger the hover effect of the gray box when itself is hovered, and you stay in pure css land.
This would make positioning a bit trickier, here is a fiddle, check it out: http://jsfiddle.net/aorcsik/Q9rfg/1/