Develop Reference

Hovering Issue With Nav Menu

My mega menu nav has a hovering issue. It activates when hovering over invisible child list items (mousing over from bottom to top, you'll notice the issue on this codepen).
This is the block of CSS that's triggering the hover:
.nav:hover > li > .subnav-block {
opacity: 1;
visibility: visible;
overflow: visible;
}
I'm thinking a JavaScript solution would help out but trying to find CSS fix for this first.

Your sub-navigation menu is taking up space, even though it is not visible. That is why you can see it whenever you are hovering above it. Adding height:0 to your .subnav-block and then setting it back to auto when hovering, should do the trick. Your css should look something like the one below.
.subnav-block {
position: static;
display: block;
width: 100% !important;
top: 54px;
left: 0;
height: 0;
overflow: hidden;
background: gray;
-webkit-transition: all 0.3s ease 0.15s;
-moz-transition: all 0.3s ease 0.15s;
-o-transition: all 0.3s ease 0.15s;
-ms-transition: all 0.3s ease 0.15s;
transition: all 0.3s ease 0.15s;
}
.nav:hover > li > .subnav-block {
height: auto;
visibility: visible;
overflow: visible;
}
UPDATE
If you want to add paddings to your sub-navigation menu, setting the height to 0 won't suffice, and you would need to change both the height and the padding when hovering. There is another way, which Hadi77 mentioned, which is setting the default display to none and then change it to block. Just like the example below.
.subnav-block {
position: static;
width: 100% !important;
top: 54px;
left: 0;
display: none;
background: gray;
-webkit-transition: all 0.3s ease 0.15s;
-moz-transition: all 0.3s ease 0.15s;
-o-transition: all 0.3s ease 0.15s;
-ms-transition: all 0.3s ease 0.15s;
transition: all 0.3s ease 0.15s;
}
.nav:hover > li > .subnav-block {
display: block;
}
UPDATE 2
Since display won't let us use transitions, the other workaround would be using a bit of JS. Since it is not much code, it is solid way to achieve this. We would need to remove the CSS hover in this.
JS
const nav = document.querySelectorAll('.nav > li');
nav.forEach(elem => {
elem.addEventListener('mouseenter', () => {
const subnav = document.querySelectorAll('.subnav-block');
subnav.forEach(sub => {
sub.classList.add('display-block');
setTimeout( () => {
sub.style.opacity = 1;
sub.style.height = 'auto';
}, 100);
});
});
elem.addEventListener('mouseleave', () => {
const subnav = document.querySelectorAll('.subnav-block');
subnav.forEach(sub => {
sub.classList.remove('display-block');
sub.style.opacity = 0;
});
});
});
CSS
.subnav-block {
position: static;
width: 100% !important;
top: 54px;
left: 0;
display: none;
opacity: 0;
height: 0;
background: gray;
-webkit-transition: all 0.3s ease 0.15s;
-moz-transition: all 0.3s ease 0.15s;
-o-transition: all 0.3s ease 0.15s;
-ms-transition: all 0.3s ease 0.15s;
transition: all 0.3s ease 0.15s;
}
.display-block {
display: block;
}

Setting visibility to hidden, is somewhat like making it transparent: The element takes space as it should (display is set to block).
Using display property is what you want. Set it to none when you want the element to be "not displayed" and set it to block to "display it".
Also if you don't want all menus to drop-down together, move the :hover pseudo-selector in .nav:hover > li > .subnav-block to li, so it would become .nav > li:hover > .subnav-block.

Change fixed header logo while scroll down

I need to change logo in fixed header while passing different sections.
If you take a look at this site, it changes color while scroll down. I need to have this function in my website. This is the site that I am working on right now.
Built with WordPress divi theme.
Tried new things but none of it is working. Can anyone recommend how to code this function?
I tried to use custom css inside divi module but it is not working.
I have this css code it was used for regular heading to sticking heading.
#logo {
opacity:1;
display:inherit;
margin: 0 0 0 0;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
#logo.second-logo {
opacity:0;
margin: 0 0 -200px -130px;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.et-fixed-header #logo {
opacity: 0;
margin: -200px 0px 0 0px;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.et-fixed-header #logo.second-logo {
opacity:1;
margin: 0 0 0 -90px !important;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
So, when user scroll down and passing different section this
.et-fixed-header #logo
.et-fixed-header #logo.second-logo
I want opacity change dynamically while scroll down and pass different section.

Javascript header change transition

I have googled repeatedly and can not find a working answer to this query...
Website: http://miners-arms.wearepixel.co.uk/job-vacancies/
When you scroll down the page of this site the header changes. What I would like to know is, how can I add a fade transition when the change takes place?
Similar to this site: https://www.venndigital.co.uk/technology/
Many thanks,

With this script:
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 110) {
//$("#headertop").addClass("parallax-window-top");
$("#headertop").fadeIn(200);
} else {
//$("#headertop").removeClass("parallax-window-top");
$("#headertop").fadeIn(200);
}
});

You are toggling a class called parallax-window-top:
.parallax-window-top {
min-height: 35px;
background: #fff;
opacity: 1;
z-index: 99999;
border-bottom: 1px solid #23bcbf;
height: 60px;
transition: display .5s ease;
-webkit-transition: display .50s ease;
-moz-transition: display .50s ease;
-o-transition: display .50s ease;
}
As you see, the display is the only thing that you want to transition. I think that opacity or height would be more appropriate. But also, this transition doesn't exist until you set the class. So when you toggle it off, you also remove the transition, which I think would make it fail. If display would be on and off based on the class, even if you transition opacity or height, you still couldn't see any change.
Here is a fiddle with a working example: https://jsfiddle.net/kas6r6rg/
I added a height and different transition times for opacity and height: https://jsfiddle.net/kas6r6rg/1/
Notice that removing the height value from the original CSS disables the effect. That is because transitions work on continuous properties, like numbers. Display is discreet: 'block','none'; there are no intermediate values between them.
So in your case, just change the CSS like this:
#headertop {
position: fixed;
width: 100%;
overflow: visible;
transition: opacity .5s ease;
-webkit-transition: opacity .50s ease;
-moz-transition: opacity .50s ease;
-o-transition: opacity .50s ease;
opacity: 0;
}
.parallax-window-top {
min-height: 35px;
background: #fff;
opacity: 1 !important;
z-index: 99999;
border-bottom: 1px solid #23bcbf;
height: 60px;
/* transition: display .5s ease;
-webkit-transition: display .50s ease;
-moz-transition: display .50s ease;
-o-transition: display .50s ease;*/
}

Ok this one works form me:
<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Tst</title>
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
<style type="text/css">
.content{
height:1600px;
}
.parallax-window-top {
min-height: 35px;
background: #fff;
opacity: 1;
z-index: 99999;
border-bottom: 1px solid #23bcbf;
height: 60px;
transition: display .5s ease;
-webkit-transition: display .50s ease;
-moz-transition: display .50s ease;
-o-transition: display .50s ease;
display:block;
}
#headertop {
position: fixed;
width: 100%;
overflow: visible;
background-color:#808080;
display:none;
}
body {
margin: 0px;
padding:0px;
}
</style>
<script type="text/javascript">
$(window).scroll(function () {
var scroll = $(window).scrollTop();
if (scroll >= 110) {
//$("#headertop").addClass("parallax-window-top");
$("#headertop").fadeIn(200);
} else {
//$("#headertop").removeClass("parallax-window-top");
$("#headertop").fadeOut(200);
}
});
</script>
</head>
<body>
<div id="headertop" >
HEADER
</div>
<div class="content">
VERY LONG PAGE<br />
VERY LONG PAGE<br />
VERY LONG PAGE<br />
VERY LONG PAGE<br />
VERY LONG PAGE<br />
VERY LONG PAGE<br />
VERY LONG PAGE<br />
VERY LONG PAGE<br />
</div>
</body>
</html>

Transition on overlay

I have a left menu that slides in when the user clicks on the hamburger. Behind it is an overlay with the following SCSS:
.overlay {
background-color: $glb-nav-80-opacity-white;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 200;
cursor: pointer;
}
.left-menu {
background: $glb-nav-dark-blue;
position: fixed;
overflow-x: hidden;
overflow-y: auto;
margin: 0;
padding: 0;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
a:hover {
color: $glb-nav-white;
}
}
When people click on the hamburger menu, the overlay shows up abruptly. I need it to fade in. How can I do that using CSS?
Here's the HTML:
<div class="overlay"></div>
<div class="left-menu"></div>
When the user opens the page the left-menu has a left position of -284px. Then when people click on the hamburger icon, I add a class to the div that sets its left position to 0.

Instead of adding a class, you can set the opacity using jQuery's .CSS
For example:
$(".overlay").css({opacity:50});
To reset it, use
$(".overlay").removeAttr("style");
Use CSS transitions as you did for the menu:
.overlay {
background-color: $glb-nav-80-opacity-white;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 200;
cursor: pointer;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
}

Use css transitions as you did with the menu, ie:
.overlay {
// other css
-webkit-transition: opacity 500ms ease;
-moz-transition: opacity 500ms ease;
-o-transition: opacity 500ms ease;
transition: opacity 500ms ease;
}
Or, if using SASS: #include transition(opacity 500ms ease);
Note, you can set the timing and style to be what you like, more here: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

just add transition to the overlayed div
div {
/* -transition: 2 seconds- */
-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
transition: 2s;
}
div:hover {
height: 200px;
background: red;
}
<div>transition on hover</div>

Javascript/CSS3 Transition

When 'image-strip' is hovered it opens to the height of it's contents. However, it's supposed to also have a smooth transition when doing so. What am I doing wrong? The CSS3 doesn't seem to be affecting it.
The Javascript:
<script type="text/javascript">
function hover(id) {
document.getElementById(id).style.height="100%";
}
</script>
The Styles:
#image-strip{
width: 100%;
height: 300px;
float: left;
overflow: hidden;
transition: all 0.3s ease-in;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-ms-transition: all 0.3s ease-in;
cursor: pointer;
}
#image-strip img{
width: 100%;
}
The HTML:
<div id="image-strip" onmouseover="hover('image-strip')"><img src="images/content/1.jpg"></div>

A couple things, first one:
You can actually pass 'this' in to your function call because then you have access to it and do not need to access the DOM again saving time and memory, not a noticeable amount, but its a better practice.
onmouseover="hover(this)"
function hover(el) {
el.style.height="100%";
}
Second thing:
CSS transitions are meant to be used without Javascript, the point is to not need JS to manipulate the DOM so to get a transition to work you would do:
#image-strip{
width: 100%;
height: 300px;
float: left;
overflow: hidden;
transition: height 0.3s ease-in;
-webkit-transition: height 0.3s ease-in;
-moz-transition: height 0.3s ease-in;
-ms-transition: height 0.3s ease-in;
cursor: pointer;
}
#image-strip:hover {
height: 100%;
}
You only need to call transition on the properties you want to affect and then when the element gets a state change, such as hover, the transition will kick in. Just to be clear you don't need any Javascript to use transitions unless you maybe add or remove an element to kick of a transition but you don't need any JS for what you are doing. Hope this is helpful.

<div id="image-strip" onmouseover="hover(this.id)"><img src="images/content/1.jpg"></div>
STEP 2-->Your css(modified you id to class --># becomes .)
.image-strip{
width: 100%;
height: 300px;
float: left;
overflow: hidden;
transition: all 0.3s ease-in;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-ms-transition: all 0.3s ease-in;
cursor: pointer;
}
STEP 3-->JavaScript(just add you css class )
function hover(id) {
document.getElementById(id).classList.add('image-strip');
}
Just make sure you do the above changes,Your code will work.100%
I had the same problem,LINK-->css bounce and add class in javascript
UPDATE 1-->
Apply your css with javascript,
document.getElementById(id).style.webkitTransitionDuration="0.6s";
document.getElementById(id).style.webkitTransitionTimingFunction="linear";
document.getElementById(id).style.cursor="pointer";