Hey there,
previously I was able to keep my desktop menu on tablet and phone size with a css code, I have found on here.
However, since the last update, this is not working anymore.
Instead on tablet and mobile size, it displays now my submenu all the time and it does not collapse.
I tried to change the breakpoint in functions.js but it did not work.
I hope somebody can help me with keeping my desktop menu!
(Here my site for reference: bybanenna.com)
Thanks in advance!
Hi,
It is due to we have updated the main theme’s scripts.
I just made a plugin, that was made specifically to help you with this. You can get the plugin from GitHub repository. Download the plugin and intall it manually to your website. Activate.
You’d flush any cache before checking the result.
I hope you find the plugin useful.
Regards,
Kharis
aThemes Support
Thank you!
It is working for tablet size, but at one point when getting smaller, it collapses to mobile menu (but not hamburger, the complete menu shows up as if i had clicked on the hamburger already).
Okay, I just deleted my browser data and reloaded the site,
now it is working perfectly!
Thank you very much,
Merry Christmas.
You’re welcome!
Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.
Merry Christmas!
Regards,
Kharis
aThemes Support
hi sir,
I met the same problem and install the same plugin yesterday and it work.
however it’s not working this morning, I remove the plugin and reinstall it again, now it seems ok.
can you let me know how to fix it? I don’t want to fix the theme everyday, thanks for your help. (here comes my site: www.gorillahandtool.com.tw)
Hey,
same thing happened to me, I just noticed it.
I tried to delete and reinstall the plugin, deleted all cache and browser data but for some reason it seems like the plugin is not working anymore.
I hope you can help again.
(For reference: www.bybanenna.com)
Hi,
Please accept my apologies for the delay in response. I really appreciate your patience.
Please try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.
#mainnav-mobi.syd-hidden {
display: none !important;
}
#mainnav-mobi.syd-hidden.toggled {
display: block !important;
}
@media only screen and (max-width: 1024px) {
.btn-menu {
display: block !important;
}
#mainnav-mobi {
margin-top: 48px;
}
}
Regards,
Kharis
aThemes Support
Thank you.
I added it and it worked in the way that the menu now is collapsed to the hamburger button.
But I do not want to have a hamburger menu.
I want to keep the full desktop menu on tablet and mobile size.
I have a plugin solution for this. You can get the plugin installer package from this link.
I hope that helps.
Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.
Regards,
Kharis
aThemes Support
I know, I used this plugin already, but it is not working anymore.
I tried to deinstall, deleted cache and browser data, however, it is still not working.
Reference: bybanenna.com (plugin is installed right now, but menu is not working, in case you want to check)
Hi,
Thank you for getting back.
I checked the plugin and seems likely there is a little issue with the plugin’s JavaScript. I will fix it in the future versions of the plugin. Meanwhile, please try these steps and keep the plugin remains active.
;(function($) {
'use strict'
if( ('not-exists' != sy_main_nav ) ) {
$(window).on('load resize', function() {
if ( matchMedia( 'only screen and (max-width: 1024px)' ).matches ) {
$('.site-header .col-md-8').html( sy_main_nav );
}
});
}
})(jQuery);
Clear your web browser’s cache before reloading your website. Let me know your views.
Regards,
Kharis
aThemes Support
I followed all the steps but that’s not really working either
on tablet size and mobile size there was a hamburger before, which is now not visible anymore
on desktop size, when moving the browser window the design of my menu changes to the standard sydney menu (I believe) and shifts to the right side
I will remove that step again, but for now leave it, so that you can view it yourself.
Hi,
It loooks like this on my phone. See the below screenshot, that was taken with my phone. Please confirm whether this is what you want or not. And let me know how currently it looks on your phone. Perhaps we got something different.
Regards,
Kharis
aThemes Support
No that’s not what I had in mind.
My menu usually displays in a different design. (Different font and different color than on your screenshot.)
When I change the browser window on my laptop to a smaller size it looks like this:
When I open it with my phone, I see the same like you, but I want to keep the design of my desktop menu as well, is that possible?
Hey,
have you looked into the problem again?
I would be happy about some feedback!
Kind regards.
Hi,
Please delete the entire custom JavaScript added with TC Custom JavaScript plugin. And keep these lines remain.
;(function($) {
'use strict'
if( ('not-exists' != sy_main_nav ) ) {
$(window).on('load resize', function() {
if ( matchMedia( 'only screen and (max-width: 1024px)' ).matches ) {
$('.site-header .col-md-8').html( sy_main_nav );
}
});
}
})(jQuery);
Before doing so, you may want to make a backup for all custom script first separately using text editor program and save it in your drive.
Afterwards, clear cache on your site. Then clear cache, history, and restart your web browser.
Let me know how it helps.
Regards,
Kharis
aThemes Support
Thank you for your reply.
I did everything you have mentioned above,
it keeps the design now, but when I make the browser window smaller, still the grey bar without any menu appears (no desktop menu and no hamburger menu).
When I open my website via my mobile phone, I do see the hamburger icon though.
Hi,
Please check your custom JavaScript code.
Find this line:
if ( matchMedia( 'only screen and (max-width: 2px)' ).matches ) {
and replace it with:
if ( matchMedia( 'only screen and (max-width: 1024px)' ).matches ) {
Save. Clear cache. And run your test.
Regards,
Kharis
aThemes Support