Mobile Menu is not visible in our website

Hi Gupal,

Please try adding this CSS:

@media only screen and (max-width: 1200px) {
  .navbar {
    display: block !important;
    height: auto;
  }
  .navbar-header {
    display: none;
  }
}

You also have some CSS in your child theme that is applying “width: inherit” to all mega menu elements, I am not sure why this is but I think you will need to remove it.

Regards,
Tom

Thank you so much for your quick reply.

But where you find that “width:inherit” is applying to all mega menu element, I mean did you find any id or class name related to those element which is present in our child theme, So that i can disable it.

Thanks,
Gopal

It is in your child theme style.css file, if you search for it you will find it.

https://screencast.com/t/3xPDczwT

Regards,
Tom

Hello,

Perfect.
Now it’s working fine when we run the same on desktop and resizing our browser screen.

But when we run the same on mobile devices, it’s not visible on the mobile why?

Thanks,
Gopal

Hi Gopal,

I do not see the CSS I provided on your site? So it is not working for me here either. You will need to clear any caching, server of CDNs you might have set up.

Regards,
Tom

Hi Gopal,

Ok, I see now. The CSS is caching in my browser because you’re using something that is removing the query strings from your site assets. That means you will need to manually clear your browser caches (on mobile too) to see changes come through.

Please try this CSS instead:

@media only screen and (max-width: 1200px) {
  .navbar {
    display: block !important;
    height: auto !important;
  }
  .navbar-header {
    display: none;
  }
}

Regards,
Tom

Hello,

Yes, I am using remove query string in our website for website speed optimization purpose.
As you said, I have clear cache from mobile then run, but still it is showing as a black strip only instead of Menu.
And also replaced the above given code, but it doesn’t affect.
I think there is any code which conflict with this plugin code.
Any other suggestion?

Thanks,
Gopal

• This reply was modified 6 years, 7 months ago by gopaltta.

Hi Gopal,

It is working for me now, but I had to force the CSS to be refreshed. If you enable query strings it would fix it for you automatically, without needing to manually clear any caches.

Regards,
Tom

Hello Tom,

I have removed the code related to “Removed Query String” from functions.php file.
In my browser, i tryout with browser resizing and also with Responsive Mode, It works perfect as expected.

But i don’t know why, it’s not working on mobile devices as i try out on 2-3 mobiles.
It will come up only with black-strip with no icon and menu name.
If it is running properly on your mobile, could you please share mobile screenshot to us.
And could you please suggest us a solution to sort out our mobile problems.

Thanks once again for your great support.

Regards,
Gopal

• This reply was modified 6 years, 7 months ago by gopaltta.

Hi Gopal,

The query strings are still missing, please check the page source.

Regards,
Tom

Hi Gopal,

I have checked on mobile (iPhone) and your theme has some code that detects mobile phones and hides the menu on purpose. You’ll need to contact your theme authors and ask if they can disable this. Otherwise I think your only option would be to use a different plugin for your mobile menu, this page explains how to do that:

https://www.megamenu.com/documentation/configuring-mobile-menu-plugins/

Regards,
Tom

Hi Tom,

Awesome, Thanks for given other solution.

I have used Responsive Menu plugin, and it works as expected.

Regards,
Gopal