![Check out Enfold](https://kriesi.at/wp-content/themes/kriesi/images/banner-enfold.jpg)
-
AuthorPosts
-
May 14, 2018 at 5:31 pm #956549
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
May 15, 2018 at 4:52 pm #957088I 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!
-
This reply was modified 6 years, 3 months ago by
Ravicski.
May 15, 2018 at 5:04 pm #957101For 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):
-
This reply was modified 6 years, 3 months ago by
Ravicski.
May 16, 2018 at 8:51 am #957389Hey!
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!
IsmaelMay 16, 2018 at 10:36 am #957431This reply has been marked as private.May 16, 2018 at 4:33 pm #957578This reply has been marked as private.May 18, 2018 at 9:22 am #958497Hi,
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,
IsmaelMay 18, 2018 at 9:31 am #958503Thanks 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
May 18, 2018 at 10:35 am #958530@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.
-
This reply was modified 6 years, 3 months ago by
Ravicski.
May 18, 2018 at 11:03 am #958543Ravicski,
Correct, I have the same issue with burger menu a.k.a mobile menu, which you mentioned in your post.May 19, 2018 at 9:30 am #958981@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);
}May 22, 2018 at 7:56 am #960169Hi,
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,
IsmaelMay 22, 2018 at 8:51 am #960193Ismael,
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
May 24, 2018 at 10:10 am #961400Could 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>May 28, 2018 at 6:41 am #962944Hi,
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,
IsmaelMay 28, 2018 at 1:18 pm #963162@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--pinned
and.headroom--unpinned
classes. 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!
May 30, 2018 at 11:54 am #964154Hi L,
Thank you for sharing!
Best regards,
VictoriaSeptember 28, 2018 at 7:47 pm #1015873Hi, @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: DOctober 1, 2018 at 5:21 am #1016411Hi,
@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 -
This reply was modified 6 years, 3 months ago by
-
AuthorPosts
- You must be logged in to reply to this topic.