-
Posts
-
Hey there,
is there a way to stop the menu-items from fading in when using the overlay menu?
I was not able to find any css transitions.Have a good one!
Best regards
MaxHey kalimeromax,
Could you please attach some screenshots of the issue?
Could you please give us a link to your website, we need more context to be able to help you.
Best regards,
VictoriaHey Victoria,
thanks for the fast reply. All of the menu-items should always be visible as soon as you click the burger-menu.
I need to disable the animation that fades them in successively.Best regards
MaxHi Max,
Sorry for the late reply and thanks for the screenshot and clarification. Could you post a link to where we can see the actual menu as well please?
Best regards,
RikardHi,
Add this to quick css:
#top #wrap_all #header #av-burger-menu-ul > li.av-active-burger-items{ opacity:1!important; }Best regards,
Jordan ShannonHey Jordan,
sorry for my late reply. I think this is a misunderstanding. My bad!
I need to show the menu completely all the time. Your code just disabled the fade effect, but it still loads the list items after each other.Best regards
MaxHi,
That’s an odd loading and I’m not seeing any css that could be causing it. Are you running any plugins that could be causing this. Try disabling temporarily to see if this resolves.
Best regards,
Jordan ShannonWant to chime in, the animation of the full overlay menu is indeed sometimes causing some trouble.
If the menu is used in full overlay the menu entries:
<li class="av-active-burger-items"><a>XXX</a></li>
are loaded one after another in an animation.On some pages that is looking quite nice, on others (with larger menus) it would be better to see the full menu at first glance, without the animation.
The animation comes from the code of the theme (no plugins or odd loading as mentioned above).
Any ideas on how to disable that? Just adding
transition:noneis not changing anything …Hi,
To remove this menu animation for certain pages, such as your example home page, try this css:#top.home #wrap_all #av-burger-menu-ul > li { top:0 !important; opacity:1 !important; }feel free to adjust the page ID “home” to another page if you wish, then after applying the css, please clear your browser cache and check.
Best regards,
MikeAs kalimeromax stated in 2020 (see above): “Your code just disabled the fade effect, but it still loads the list items after each other.”
Think it would be necessary to alter a menu script anywhere – or am I wrong?
Hi,
The css from 2020 did do this because it didn’t include the top:0 that I added above.
I tested this on your site that you linked to and it works correctly, shows the mobile menu items without animation, please try this and clear your browser cache and any caching plugins.Best regards,
MikeTrue, it “works” on the specific sample page, but not in general. With your code added the menu seems to be showing all its items directly, but if you look into the developer tools you see that they are still loaded one after another, only without a visible animation. If you have more complex menu layouts problems might occur due to positioning the items only after they are proberly rendered (seems to be defined by a time setting). Therefore I still think it is not sufficient to only alter the css to get rid of the partially building of the menu structure.
Hi,
Sorry, I do not see this in the Dev Tools, I believe that what you are seeing is the structure created in the DOM, because the mobile menu structure is only created after the burger menu is clicked, not on the original page load.
Can you demonstrate an example where this solution is not working?Best regards,
MikeBut that is what I mean:
the structure created in the DOM, because the mobile menu structure is only created after the burger menu is clicked
The structure is created one menu item after another, not all at once.
If you observe this line while clicking on the menu icon, you will see the items appear one by one:
<div class="av-burger-overlay" style="display: block; opacity: 1;">Hi,
The av-burger-overlay div doesn’t exist until the burger menu is clicked, then the menu items are created and added, in less than half a second, they can’t be all added at the same time in the DOM as each one needs to be created.
The animation that you originally saw is from css not the creation of the DOM elements.Best regards,
MikeThanks for the explanation, then that will be the effect that you can definitely notice in some projects with large menus.
Hi,
I don’t believe that the DOM creation would cause any visual effects on the front end, have you been able to create this effect while using the css solution above?Best regards,
MikeYou can see this effect on the page mentioned, actually it is already there (file attached). The menu items appear one after another, even if this is “invisible” due to your css.
If you for example start to position the elements by css this is executed later. Had this problem on other sites, but I don’t have an example because the desired look wasn’t achievable due to the gradual appearance of the menu items. So I always had to find other solutions or use the standard.
Hi,
Thank you for the screencast, but this is the DOM as I have been trying to explain to you.
Nonetheless, I have asked the Dev Team for advice on this and they said that this is the correct behavior and changing the menu would not be easy, but they have opened a request to review the menu function at a later date when they have more time.
In the meanwhile please use the css solution:#top.home #wrap_all #av-burger-menu-ul > li { top:0 !important; opacity:1 !important; }Thank you for your patience and as always if you have any other questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.
Best regards,
Mike
- The topic ‘disable fade in for overlay menu’ is closed to new replies.