-
Posts
-
Hi,
I built a mega menu and since some days, item titles are not displayed anymore on tablet and mobile.
I made a video in private content to show the issue.
Do you know where it could come from?Furthermore, images are too big on tablets, so I would need to make them 50% width.
Could you please help me with this?If needed, you can find a link and credentials to my website in private content.
Thanks a lot!Hey fcp,
Sorry for the very late reply and thanks for the login and video, I took a look at your mega menu and see that you have added the images in the menu by adding HTML to the menu items, this HTML doesn’t include the title tag and it is missing the closing H6 tag, for example this is your first item:
<img src="https://your-site.fr/medias/accueil/menu/nos-univers-bonne-nuit-les-petits.jpg"><h6><br>Bonne nuit les petits
I changed it to:
<img src="https://your-site.fr/medias/accueil/menu/nos-univers-bonne-nuit-les-petits.jpg" title="Bonne nuit les petits"><h6><br>Bonne nuit les petits</h6>
Now the title is showing on hover for that item, please check.
Please note that mobile devices do not have a “hover” event, so the mouseover image title will not show in the mobile menu on actual devices.Best regards,
MikeHi Mike,
Thanks for your reply.I think there is a misunderstanding…
First, everything used to work like this before and I didn’t change anything (or something I don’t know).
Secondly, titles are not showing on hover, they are displayed all the time and they used to be displayed on desktop and on mobile.I previously opened the following thread to build my menu (you already helped my with this), it was not easy and those html worked fine.
Your last change only modified my layout (see screenshot in private content). It added a border around title and I don’t want it, it also changed font size and so on… But nothing changed on mobile, titles are still missing.
I really don’t know what happened and when :-(Hi,
Thank you for the feedback, I review the older post but I didn’t find an example of the code used, but the current missing H6 tag is an issue that should be corrected.
It looks like the AMP plugin is rebuilding the mobile menu, please try disabling this plugin and check. Of the plugins you have installed, the ones that have shown to cause issues on other sites are AMP, Autoptimize, JetPack, & Smush. For example, you have lazyload enabled in the theme settings, and in Smush, and Autoptimize, this could be a conflict.
Is the AMP new, I don’t recall seeing this on your site before?Best regards,
MikeHi Mike,
Thanks a lot for your reply.You’re right, AMP plugin is quite new on my installation, but it is not the cause of the issue.
Smush is the cause, one more time ! :-( In fact, Smush Lazy Loading option seems to be the cause.
I would like to try to keep only one Lazy Loading option enabled, so which plugin do you think is the best for lazy loading and which one is better for me to keep activated? Smush, Autoptimize or simply Enfold theme?About the missing tags, I remember I found this solution by myself to achieve exactly what I wanted in my menu. I never found a solution to close tags correctly and make it work. In your last post, you saw that closing tags affected my menu display.
But for sure, if you have any idea to keep this design WITH correct HTML, I take it! ;-)Hi,
Sorry for the late reply, I would recommend using the theme lazy load and disable the other ones.
It seems that you have done this and the missing H6 closing tag is being added by the DOM automatically, at least in Chrome, but this might not happen in every browser, every time.
I added the closing H6 tag to each mega menu item and I then found the css adding the border and corrected it, please clear your browser cache and check./*Bordure des images*/ .avia_mega_div > .sub-menu li > span.mega_menu_title > a:nth-child(1) {border: solid 0px #cca752!important;}Best regards,
MikeHi Mike,
Thanks for your reply.First, about lazy load I understand, but Enfold lazy load has to be enabled on each element in the ALB, right? Is it possible to activate it on all images like with plugins?
Secondly, about my mega menu, but I checked on Safari and Chrome and I’m sorry but this is not ok. I made two screenshots in private content to show you. Title font changed (this is not a big problem) and border is not displayed anymore around my images.
So for the moment, I had to restore my older code…Hi,
In the theme options Enfold Theme Options > Performance > Responsive Images And Lazy Loading is the sitewide option to enable lazy loading, and while many elements have an option to disable lazy loading, the default option is “on” based on this setting.
Thank you for the screenshots, but I’m having trouble seeing the difference between the two. What I had done was to add the closing H6 tags to the mega menu items under “Nos Unvers”, doing this showed a gold border around the image and H6 text, from earlier I realized that this was not ok, so I adjusted this css to change that border to zero px, thus not showing:/*Bordure des images*/ .avia_mega_div > .sub-menu li > span.mega_menu_title > a:nth-child(1) {border: solid 0px #cca752!important;}Best regards,
MikeHi Mike,
Thanks for your reply.Enfold Theme Lazy Load option is already activated. So I deactivated my plugins Lazy Load option. I will test my website speed later, to see if everything is ok with this.
I’m sorry there is no difference between the two previous screenshots. In fact one is Safari preview and the other one is Chrome preview. That’s all.
What I told you before is that when closing h6 tag and changing my CSS, gold borders are not displayed anymore (like shown on the previous screenshots).Hi,
Sorry for the late reply and thanks for the feedback. This time I commented out this css in your child theme stylesheet:/*Bordure des images*/ /*.avia_mega_div > .sub-menu li > span.mega_menu_title > a:nth-child(1) {border: solid 1px #cca752!important;}*/then I added this css:
#avia-menu .avia_mega_div > .sub-menu li > span.mega_menu_title > a > img:nth-child(1),#avia-menu .avia_mega_div > .sub-menu li:hover > span.mega_menu_title > a > img {border: solid 1px #cca752!important; transform: none !important;}then I added the closing H6 tags, now the gold border is only around the image.
Please clear your browser cache and check.Best regards,
Mike
- You must be logged in to reply to this topic.