-
Posts
-
I have one more problem with the code snippet from kriesie and Guenni007 (thanks a lot for your help). The problem: If I put submenu Items to the menu, the distance to the top changing. You can see this also on Guenni007 testing page:
Here you can see a Screenshot of the problem:
http://pietsch-pm.de/test/screen.pngAnd her you will find the code snippet:
https://kriesi.at/support/topic/mobile-menu-effect/Hope somebody can tell me whats the reason for this problem.
ADDITION:
If I deactivate the code snippet:#mobile-advanced{ width:100%; right:0; position: absolute; z-index: 1000; top:-100%; padding:89px 0; overflow: hidden; border-left-style: solid; border-left-width: 1px; margin:0 0 0 -2px; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; transition: all 0.6s ease; -webkit-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; transform-origin: 0% 0%; display:none; } .csstransforms3d #mobile-advanced{ -webkit-transform: scale3d(1); -moz-transform: scale3d(1); transform: scale3d(1); } .show_mobile_menu #mobile-advanced{ -webkit-transform: translate(0, 100%)!important; -moz-transform: translate(0, 100%)!important; -ms-transform: translate(0, 100%)!important; transform: translate(0, 100%)!important; } .csstransforms3d .show_mobile_menu #mobile-advanced{ -webkit-transform: translate3d(0, 100%, 0); -moz-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); }… the mobile menu looks good! Maybe the Code snippet should be expanded for displaying sub-menu items correctly? I just don´t know how!
Hello again,
I try to solve the problem – but I really need your help!What I found out:
1) A margin-top directly in the Chrome-developer-tools,will solve the problem:.csstransforms3d .show_mobile_menu #mobile-advanced{ margin-top: -168px!important; }2) If I put the same CSS in Enfolds Quick CSS – nothing happens – the CSS also will not show up in the Chrome-developer-tools! Can you please help? In private content you will find account details
Hi,
I commented out the code you have in Quick CSS field and it seems to load fine on my end at the moment. I was able to correct the issue on Guenni007’s site firstly by changing top value however on your site -100% is working fine. Can you please flush browser cache a few times and review your website?
Best regards,
YigitHere you can see a Screenshot of the problem:
http://pietsch-pm.de/test/screen.pngSame issue on my site:
http://pietsch-pm.de/test/screen2.pngHi,
Looking at the code snippet it appears that you are trying to slide the menu from top. I checked your site and it loads up fine without any gap on top.
screenshot ->
http://i.imgur.com/M7B9UNl.png” alt=”” />Like Yigit mentioned due to a caching issue you may not see the changes until the cached files are cleared in your browser.
Please try to hard refresh by pressing Ctrl + Shift + F5 on your browser or press the F12 key to open chrome dev tools and right click on the refresh button and select “Empty Cache and Hard Reload” and review the site again.
If you still have the same issue please try loading the site on a different system or use the below code in Quick CSS:
#mobile-advanced{ right:0!important; top:-100%!important; -webkit-transform: scale(1)!important; -moz-transform: scale(1)!important; -ms-transform: scale(1)!important; transform: scale(1)!important; -webkit-transform-origin: 0% 0%!important; -moz-transform-origin: 0% 0%!important; -ms-transform-origin: 0% 0%!important; transform-origin: 0% 0%!important; display:block!important; } .csstransforms3d #mobile-advanced{ -webkit-transform: scale3d(1)!important; -moz-transform: scale3d(1)!important; transform: scale3d(1)!important; } .show_mobile_menu #mobile-advanced{ -webkit-transform: translate(0, 100%)!important; -moz-transform: translate(0, 100%)!important; -ms-transform: translate(0, 100%)!important; transform: translate(0, 100%)!important; } .csstransforms3d .show_mobile_menu #mobile-advanced{ -webkit-transform: translate3d(0, 100%, 0)!important; -moz-transform: translate3d(0, 100%, 0)!important; transform: translate3d(0, 100%, 0)!important; } .container #advanced_menu_toggle, #advanced_menu_hide { right: 20px!important; top: 58px!important; z-index: 999999!important; }Best regards,
Vinayhello vinay, thank you very much for answering! But your suggestions doesn´t work. In details:
1) the screenshot you have provided is not from my site. my site is http://pietsch-pm.de
2) i refreshed the site also with hard reload and working with different browsers and systems:
– osx 10.11.16 – chrome and safari and firefox (latest versions)
– ios 10.1.1 – safari and chrome
… every browser shows the same failure!3) i also copy your code in quick css. but nothing change at all.
So please have a closer look. the admin account i provided is still accessible. thanks in advance!
Hi!
I checked the page but I can’t reproduce the issue described in the screenshots. This is what I see on my end.
// http://i.imgur.com/Ua7hypg.png
// http://i.imgur.com/OozrMIY.pngBest regards,
Ismaelhi ismael,
you have to klick on the item “leistungen”
it seems to be a positioning problem of the submenu as i wrote in my first post.Hi,
Thank you for the clarification, we are happy to help you resolve this issue :) I checked your site and the mobile menu slides down correctly. However when the menu item with submenus are clicked the menu jumps down. This seem to be an issue with the custom css. I couldn’t find the related css code in General styling > Qucick CSS would you mind letting us know what code and where we can find it.
Please let us know where we can find the related code.
You are also using an old version of the theme please try this plugin to clear WordPress transients if you do not receive auto updates and make sure your API key is correct: https://wordpress.org/plugins/artiss-transient-cleaner/.
If it does not help, I am afraid you might need to update the theme manually – http://kriesi.at/documentation/enfold/updating-your-theme-files/
Unfortunately not all Server environments are able to make use of the auto update feature provided by ThemeForest :/
Best regards,
Vinayhey vinay,
you can find the the related code above on my second post.i updated the theme from 3.7.1 to 3.8. but this will not solve the problem.
Hey!
We modified the css code in the Quick CSS field a bit. Please remove browser cache or hard refresh before testing the page.
Cheers!
Ismael
- The topic ‘Mobile menu effect Code Snippet problem’ is closed to new replies.