-
Posts
-
Inspired from this topic Mobile menu reveal on scrolling up I am currently experimenting to set headroom.js to work on mobile. It would be a nice and smooth touch if I manage to integrate it with Enfold.
Unfortunately, using this custom CSS, the menu overlay on active mobile menu is shrinked and the navigation elements cannot be seen:
@media only screen and (max-width: 767px) { #header { position: fixed!important; top: 0; } } .headroom { will-change: transform; transition: transform 200ms linear; } .headroom--pinned { transform: translateY(0px); } .headroom--unpinned { transform: translateY(-100px); } .av-burger-overlay-active .headroom--pinned { transform: translateY(0px); }On desktop header it works like a charm.
When applying the most basic css, mobile menu works fine and can be seen:
.headroom--pinned { display: block; } .headroom--unpinned { display: none; }But this is too basic and doesn`t look good.
It might be some kind of a CSS conflict of
transform: translateY(-100px);ortransform: translateY(0px);with mobile menu overlay height values. I am trying for 2 days and running out of possibilities.What am I doing wrong here? Maybe some other alternatives to fancy-animate the mobile header pin/unpin that doesn`t conflict?
Regards
I am also very interested to get this working. Following the above post, I managed to get it working, but only partially. The problem is that I use the hamburger menu on desktop. It appears that the overlay menu items get ‘trapped’ inside the header. When clicking on the hamburger icon, there appears a small scrollbar at the right. When you scroll it, you can see all the menu items sliding by… inside the header area (!).
I have not enough knowledge of coding to fix this, but perhaps it gives somebody an idea where to start looking…
Thanks!
For reference, this is the CSS I added to the editor:
/*header behavior*/ .headroom { will-change: transform; transition: transform 200ms linear; } .headroom--pinned { transform: translateY(0%); } .headroom--unpinned { transform: translateY(-100%); }And then I added the headroom.js, the extra JS to target #header and the script to make sure that it slides – all added to the Google Analytics field of the child theme (as follows):
Hey!
Thank you for using Enfold.
@L: Where did you implement this? The short url does not exist. Please provide the actual url to the page.
@Ravicski: Is it working on your site? Please provide the site url so that we could check it.Cheers!
IsmaelHi,
Thanks for the update. You should disable these css codes when the mobile menu container is visible.
.headroom { will-change: transform; transition: transform 200ms linear; } .headroom--pinned { transform: translateY(0px); } .headroom--unpinned { transform: translateY(-100px); } .av-burger-overlay-active .headroom--pinned { transform: translateY(0px); }Just wrap it inside a css media query.
@media only screen and (min-width: 989) { /* Add your Desktop Styles here */ }Best regards,
IsmaelThanks Ismael,
I think you got me wrong here… The desktop is fine. I was thinking about how to implement this on mobile without having the issues.As you can see, the mobile menu on mobile cannot be seen when opened but I would like to get it working on mobile with a small transition on reveal and hide.
Currently the enfold menu on mobile makes some kind of CSS conflict and I cannot figure out why is this happening.
Regards
@Ismael. Could it be that L. is using a header with a full menu (instead of the mobile icon)? If so, the headroom appears to be working fine indeed. But I bet, when L changes his settings to a header with mobile icon, he has the same problems as I have on desktop.
I am repeating this, because I think it is basically the same problem that’s causing L’s problems on mobile. I have it on mobile as well.
It’s not my intention to hyjack this thread, but perhaps my experiences could add to finding a solution.Best, R.
Ravicski,
Correct, I have the same issue with burger menu a.k.a mobile menu, which you mentioned in your post.@Ismael: your addition to the css below did fix the overlay (it now is full screen instead of 3/4 screen), but the menu items are still inside the header div and thus invisible. Hopefully there’s a solution for this? By the way: I used the css without wrapping it in the media query.
.av-burger-overlay-active .headroom–pinned {
transform: translateY(0px);
}Hi,
What is the expected behavior of the header on mobile device? Is it supposed to stick? A sticky header helps on desktop view but it’s a distraction on mobile devices because the space or screen size is limited.
Best regards,
IsmaelIsmael,
It is expected to behave like on the demo I posted above. With functional menu.It is not sticky when the user is scrolling down and not causing distraction. This solution helps to get instant access to menu.
Regards
Could it help to destroy Headroom when the mobile menu is clicked? I tried this, but it does not work. Perhaps I am missing something?
<script>
document.getElementById(“avia-menu”).onclick = function() {myFunction()};function myFunction() {
if( $(“#header”).hasClass( ‘headroom’ ) ) {
$(“#header”).headroom(‘destroy’);
}
</script>Hi,
We would like to help with the issue but this may require modifications that are beyond the scope of support. Please contact the script author or disable the script on mobile as previously suggested.
Best regards,
Ismael@Ravicski I found out that the real CSS conflict happens on mobile with this part of the code:
.headroom--pinned { will-change: transform; transition: transform 200ms linear; transform: translateY(0px); }So the solution might be to remove the old CSS and use a customised keyframes animation for
.headroom--pinnedand.headroom--unpinnedclasses. This might be a good beginning to start with:.headroom--pinned{ animation-name: slideDown; -webkit-animation-name: slideDown; animation-duration: 1s; -webkit-animation-duration: 1s; animation-timing-function: ease; -webkit-animation-timing-function: ease; visibility: visible !important; } @keyframes slideDown { 0% { transform: translateY(-100%); } 50%{ transform: translateY(8%); } 65%{ transform: translateY(-4%); } 80%{ transform: translateY(4%); } 95%{ transform: translateY(-2%); } 100% { transform: translateY(0%); } } @-webkit-keyframes slideDown { 0% { -webkit-transform: translateY(-100%); } 50%{ -webkit-transform: translateY(8%); } 65%{ -webkit-transform: translateY(-4%); } 80%{ -webkit-transform: translateY(4%); } 95%{ -webkit-transform: translateY(-2%); } 100% { -webkit-transform: translateY(0%); } }Hope it helps! Cheers!
Hi, @L, @Ravicski
can you help me with a guide on how to install this change? I tried to see on the internet but I can not figure out how to make this type of menu animation work. I would like if possible that the menu on my site, https://www.stilecatalini.it, make the animation only on the mobile view and not on the desktop.
Be so kind to share with me how you did it to make it all work. If you have succeeded: DHi,
@gobbo_79: Try to wrap the css codes or keyframes inside a css media query.// https://www.w3schools.com/Css/css3_mediaqueries_ex.asp
Best regards,
Ismael
- You must be logged in to reply to this topic.