Forum Replies Created
-
Posts
-
Hi Victoria,
I moved back to using the Enfold configuration for the Events Calendar and now the Avia Layout Builder seems to work fine.
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>@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);
}@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.
@Thatsmyname: Did it also work on desktop with a mobile menu (burger)? That’s where I get stuck…
And which headroom.js did you use? 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):
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!
Hello Ismael,
I run into the same issue as described above (missing event details on the single events page), but unfortunately your solution doesn’t seem to work for me.
Could you please help me out? Any help would be much appreciated. I am running the child them of Enfold v2.4.6 in combination with the Events Calendar Pro plugin.
Thanks in advance for your answer.
Best,
RavicskiHi guys,
I would like to comment on that reply, since this behaviour of the header (becoming visible when scrolled up) is becoming more and more common practice. See for instance unsplash.com. It’s particularly good for mobile use. So please please: put this high on the list for future updates!!Thanks!!!
