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;
}
Related
I am trying to display 3 last items in menu on different height. (10px higher)
I am able to style them with:
#main-nav li:nth-of-type(n+6){
font-size:12px;
margin-left:30px;
}
but for some reason:
#main-nav li:nth-of-type(n+6){
margin-top:-10px;
}
does not work.
Any ideas how to achieve that result?
Your code is working, it is just the parent container that is not letting you see the effects.
Try changing float:right on your #main-nav to display:flex instead.
#main-nav {
/*float: right;*/
display: flex;
-moz-transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
margin: 0;
}
I usually try to avoid using float at all in my CSS as they aren't really meant for layout.
I am trying to add transition, but can't make it work. My hover works slightly different, as it is targeting different class to change, it's:
.news-thumbnail:hover > .news-description-container{
padding: 1.5rem 2rem;
height: 21rem;
-webkit-transition: all 2s linear;
-moz-transition: all 2s linear;
-o-transition: all 2s linear;
transition: all 2s linear;
}
Edit: adding original class
.news-description-container{
position:absolute;
width: 100%;
bottom: 0;
border-bottom-right-radius: 1rem;
border-bottom-left-radius: 1rem;
background-color: white;
padding:2.5rem 2rem;
text-align: left;
height: 15.5rem;
}
Which makes this:
https://i.stack.imgur.com/DyeOS.png
Into this when you hover it(news-thumbnail), simply white area(news-description-container) slides up:
https://i.stack.imgur.com/Q6mxf.png
How can I make the transition work for this one? I just want it to slide up and down, not appear/disappear without transition.
Maybe I did it wrong and shouldn't do it this way?
Didn't found anything after googling, so it might be useful for others.
Thanks!
See Here... You can use same style hover transition.
Just change few parameters and thats it...
See code [Here]1
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;
}
I want to replicate the effect of the that you see in the pictures here: http://www.akqa.com/work/
I thought this was the code necessary for it but it doesn't work. What is missing?
div {
opacity .4s,transform .4s
}
There are three things wrong here.
Firstly opacity .4s,transform .4s is not a valid CSS declaration.
The correct syntax looks like this:
div {
-webkit-transition: opacity .4s ease .4s;
transition: opacity .4s ease .4s;
}
Secondly, a transition rule implies that there are different values for the first and second instance (a point A and point B if you will). In the example below, you will notice that I have specified opacity:0; unless the div has a class .showing in which case it now has a rule that states opacity:1;
div {
opacity: 0;
-webkit-transition: opacity .4s ease .4s;
transition: opacity .4s ease .4s;
}
div.showing {
opacity: 1;
}
Lastly, you will also require something to change the state of the div to "let it know it needs to change it's opacity". We already told it in the CSS above that when it has a class .showing it's opacity is different.
A nice way to do this is to add a tiny jQuery script to give it the new class once the page has fully loaded.
jQuery(window).load(function(){
$('div').addClass('showing');
});
Are you focus on the text popup effect after mouse over the image? If yes, i did some trace from the html and css file.
<article class="work-item in-view" ...>
<picture>
<source></source>
<source></source>
<source></source>
<img></img>
<div class=content>
/* pop up text content*/
</div>
</picture>
</article>
.work-item {
background-color: #000;
cursor: pointer;
float: left;
overflow: hidden;
position: relative;
width: 100%
}
.work-item .content {
background-color: rgba(0,0,0,0);
bottom: 0;
color: #FFF;
height: 100%;
left: 0;
padding: 0 30px;
pointer-events: none;
position: absolute;
right: 0;
top: 0;
-webkit-transition: background-color .4s;
transition: background-color .4s;
width: 100%
}
I hope this findings may help you.
If the direction is correct, you can grep 'work-item' and 'content' from the css and follow the logic.
I have a :before pseudo element displayed on :hover of a particular element.
I'm using font awesome and want to vertically center the content of the :before, but vertical align, margins etc haven't been of much help.
Any ideas?
.tile:before {
font-family: FontAwesome;
font-size: 150px;
color: white;
text-align: center;
border-radius: 15px;
opacity: 0;
z-index: 9999;
width: 100%;
height: 100%;
content: "\f16b";
position: absolute;
background-color: rgba(219,127,8, 0.7);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.tile:hover:before {
opacity: 1;
}
Here are a few potential suggestions for .tile:before :
1 - use pixel value instead of 100% for height:
height: 100px;
2 - Make sure this is being displayed as an element that can ACCEPT margin, padding, etc.
display: block;
-or-
display: inline-block;
3 - I know you said you tried margins, but did you try padding-top?
padding-top: 20px;
4 - Try setting the overflow to hidden or visible. This often forces elements to behave "better."
overflow:hidden;
I would try all of these TOGETHER and see what happens.
Last, I might try setting a "top:" value since you have "position:absolute;" already. Maybe try this in conjunction with "position:relative;" too.
top: 10px;
Really need all the code (HTML) to tell what would work.
Using :before as the cover background to display on top of the tile element, and an :after with:
.tile:after {
top: 50%;
left: 50%;
/* Both half of font-size */
margin-left: -75px;
margin-top: -75px;
height: 150px;
line-height: 1;
}
Seemed to do the trick. Thanks all.