-
Posts
-
Hi,
Digging for the reason for some submenu displacement on the Portfolio submenu in the 2017 demo I imported (all other submenus are nice aligned with their parent, the portfolio submenu is not), I noticed there was some difference between the online version and my imported version.
The submenu element on my imported demo has:
element { opacity: 0; display: none; right: -514.084px; }the online demo however has:
element { opacity: 0; display: none; right: -462.517px; }Can you tell me where I can find this setting? Is this something I need to fix or something that needs to be fixed in the demo for import?
Also, the imported demo has Pages > Blak Pages
The online demo has Pages > Blank Pages
You may want to look at that.Rob
Hey Rob,
Thank you for the inquiry.
Where can we see the issue? Please provide the site URL in the private field and include the login details if possible.
The position of the mega menu is calculated based on a few factors such as the browser viewport width, the position of the parent menu item, the number of columns in the mega menu or its total width etc, and so any changes on these factors and/or variables will affect the mega menu position or offset value. The script that calculates this position or value can be found in the enfold/js/avia-snippet-megamenu.js file, look for the calc_offset function.
You should be able to adjust the position of a specific mega menu container using css.
Best regards,
IsmaelHi Ismael,
Thanks for the info, that actually helps me to understand better.
I have discovered that the discrepancy happens when WooCommerce is activated.
You can find a link to the demo dev site installation in private. Almost nothing changed from standard.
All plugins disabled (except 2 needed ones for access), submenu Portfolio turns to normal, like in the online demo).
You can activate only Woo and see what happens to the Portfolio submenu positioning.Thanks for your help!
Rob
Hi,
Thank you for the login token.
The offset values on your site and the demo are almost the same when we tested it. There is a slight difference (9px), but I am not sure if that matters. Please check the screenshot below.Screenshot: https://imgur.com/a/HgtanPa
Sorry. I forgot to enable Woocommerce. Let me get back to you.
Best regards,
IsmaelHi,
The offset value is a bit off when we enabled Woocommerce, which might be due to the cart icon. Does it work differently when you position the cart icon outside the main menu? The cart icon position can be adjusted in the Enfold > Shop Options > Header Shopping Cart Icon settings.
The only difference between the site and the demo is the “Languages” menu item or language switcher of the falang plugin, which could also influence the final offset value of the mega menu container.
You can use this css code temporarily to adjust the position of the mega menu container inside the Portfolio menu item.
#menu-item-3040 .avia_mega_div { left: 0; }Best regards,
IsmaelHi,
Thanks for taking a look at this. I have temporarily removed the Falang language switcher from the menu, and that doesn’t make that much difference regarding this issue as you can see.
The issue (with and without Woo activated) is best seen just before the viewport changes to tablet size. The submenu items for Portfolio start somewhere between the main Portfolio and Blog menu links without Woo. With WooCommerce activated the submenu for Portfolio opens between the e and the s of the Pages menu link :-)
When there are 4 columns in the submenu (like for Pages) things are fine, when here are 2 columns in the Mega submenu it may make access to the submenu difficult, that’s why I ask about this (it’s not just about the demo, it is about this kind of submenu config in general).
I don’t think adjusting the offset through css is a proper solution, as it would need to be specifically done per viewport for a specific setup and kind of defeats the purpose of the JS calculations?
Added remark:
I think the issue is that the calculations are done INCLUDING the cart and the social icons for the menu (maybe better with just the menu links themselves for calculation?) .Please check and let me know what you think. I have left WC activated, feel free to change as you see fit. Enfold file merging and compression has been diabled to make checking easier.
Best regards,
RobP.S. Can you also have someone fix the “Blak Pages” submenu link in the demo to import? It looks a bit silly :-)
Hi Ismael,
Your CSS solution for the submenu item works indeed, with left:0;
I was too hasty concluding that it wasn’t a good solution, sorry. With that added indeed the submenu remains neatly aligned with the main Portfolio menu link on all viewport sizes before tablet. So my conclusion about the cart/socialbookmarks area included in the calculation was also way off :-)With your added CSS, even with cart, 3 social bookmarks and the Falang language switcher, the submenu alignment is fine, neatly below the Portfolio menu link.
I have left the token active so you can see it on the dev site in action.Even though this works, I can’t help but feel that this is a bit of a band-aid, in the sense that anyone with a 2 or 3 column submenu would have to manually apply that to that specific submenu ID.
Would it be possible to include some logic regarding submenu columns below 4 to have this added automatically? Just a thought.
Thanks for the help and have a good day,
Rob
Hi,
Sorry for the late reply. I imported the demo to check the issue further and while waiting for the import to finish, I get on with other inquiries and this one totally slipped my mind. Sorry about that.
The position of mega menu container on our end is correct as shown in the screenshot below. We didn’t have to add the css code above.
Screenshot: https://imgur.com/xMiFqmE
It is possible that some elements (e.g language switcher) in the header are affecting the position of the mega menu container because the script that calculates it does not take them into account.
P.S. Can you also have someone fix the “Blak Pages” submenu link in the demo to import? It looks a bit silly :-)
I will forward it to our channel. Thank you for the notice.
Best regards,
IsmaelHi Ismael,
Thanks for looking into this. No worries about the “slipped my mind”, you guys have a lot of different things on your plate and that’s totally understandable, happens to me as well :-)
Your css solution works fine, like I mentioned. It becomes necessary mostly when users have their desktop browser window set smaller than max (most notably just before changing to tablet size). The extra social bookmarks or menu items don’t affect it as much.
The Enfold shop demo needs a small fix as well: “How it all begann – our idea of the perfect clothing store” has two nn’s.
Thanks for your help and time!
RobHi Yiigit,
No worries, mine was only a very very very minute contribution compared to the efforts by the support team and devs :-)
Thanks for a great theme!You can close this thread, thanks.
Rob
- The topic ‘Two questions about the 2017 demo when imported’ is closed to new replies.