Is it possible to adjust the breakpoints at which the mobile header becomes active?
The reason I want this is that when I use the option “drop items in more” which would solve my problem, whenever I reload the page the whole header reloads in a strange way causing a bad feel to the website.
Update – is it possible to avoid this big layout shift caused by “drop items in more” option without disabling it because it is a better way to do it? If not – is there an update planned that will fix this?
Hello,
Can you please provide some screenshots and the link to your website? Also, you can try those options for preload https://i.imgur.com/kZX0qKf.png
Thank you!
Hello,
I recorded a video to show you what I mean:
1. https://www.loom.com/share/b2f65cbb47ac446fafe8361ea93bb3af?sid=e8f728a8-6d98-4ef2-bcb5-6bdf56c456e1 here you can see the layout shift with the preload option and drop items in more enabled.
2. https://www.loom.com/share/b9e13bcb47b449bf886247fdb88ae311?sid=b44a883d-a10e-4137-9ff6-f55063044525 here you can see the website loading without a layout shift without drop items in more and preload options enabled.
My question is – is there a way to fix that issue with the layout shift, if not – how can I edit the breakpoints to show the mobile menu earlier?
Hello,
Please try to add the code in the Theme Panel -> Analytics/JS code in the head with the style tags -> https://i.imgur.com/bLOKSlE.png
.td-header-desktop-wrap .td-element-style,
.td-header-desktop-wrap .menu-item,
.tdb_header_menu .tdb-menu-items-pulldown {
opacity:1!important;
transition: none!important;
}
Thank you!
Sorry for the late reply, should I activate the drop items and preload when I add it?
Hi,
Please use the above code with the drop more items and check if the issue persists.
Thank you!
Hey there,
I tried it but it seems that the issue with the layout shift is still there. I am posting a video so that you can see – https://www.loom.com/share/481ec8ec7f434b329685bf7ac33ca294?sid=1cfbfa42-2b32-49b9-905d-89e777033046
Hello,
I would like to take a look. Can you please contact us via email at contact@tagdiv.com and provide the wp-admin access? Include the link to the topic in the email.
Thank you!
I just sent the information over your email, please read the lines I wrote because there is a small issue that might slow you down. Best regards and thanks for looking into the issue!
PS: Currently the option drop items in more is disabled and the code from the theme panel is removed – feel free to add it and test things over 🙂
Hey there, any update on this?
Hi,
My colleagues will reply soon.
Have a great day!
Hey there, I want to say that the issue was handled perfectly, I didn’t even expect it to be possible to be fixed that fast. Great job, 10/10, thank you! 🙂
Today I noticed an issue.
Check the video – https://www.loom.com/share/150f2293884c46038109a080ede3f153?sid=d0e4a639-1bd0-4e09-ab05-681cff21f0ea
When I hover over the dropped in more items, the design is breaking. I believe it occured after we did some changes.
Hello,
Please disable the mega menu for the latest category, which has more sections.
Thank you!
That will surely fix the issue, but it is more like a workaround. If I have a screen size where the menu can fit and show the category – it is good to have it as a mega menu. Are you sure that there is no other way to do it? And if so – are the devs notified to fix it?
Hello,
Yes, I’m sure that there is no other solution.
Thank you!
And for the second question – are the devs notified to fix it? Is your team looking for a way to fix this?
Hello,
That is not an issue; you can do the menu in different ways, so if you want to have a menu made like mega menu, then disable the more option.
Have a great weekend!
I couldn’t agree with you on that. It is obviously causing a problem. Please if possible notify your developers for it.
I just noticed that your email support added a code snippet that fixes the issue, I will share it for anyone who encounters this problem:
moreButton.addEventListener(‘click’, function() {
if (dropdownList.classList.contains(‘active’)) {
dropdownList.classList.remove(‘active’);
dropdownList.style.display = ‘none’;
} else {
dropdownList.classList.add(‘active’);
dropdownList.style.display = ‘block’;
}
});
Have a great day! 🙂
