Big Bang WP Theme – menu lost on mobile / scaled down browser

First of use Child Theme or use plugin like Custom CSS Manager.

Then add following in it:

@media only screen and (max-width: 767px) and (min-width: 480px) {
#primary-menu ul {
      display: inline !important;
}

Thanks Aditya,

That has helped a bit, now it works in landscape on iPhone, but in vertical the menu still disappears!

Do I just change the widths?

Cheers,
Dave

Yep, do this:

@media only screen and (max-width: 767px) {
#primary-menu ul {
      display: inline !important;
}

Awesome, so now the site nav menu drop down (mobile specific?) is back, which is great. But the regular menu is showing above it – so basically I have two menus!

Is there any way of just having the drop down ‘scroller’ type nav menu on iPhone, and removing the ‘normal’ menu above it. As the ‘normal’ menu doesn’t work well on the iPhone (dropdowns are disabled)

Appreciate any help!

I am little confused here, about how your theme is working.
Try adding this along with last code:

@media only screen and (max-width: 480px) {
#primary-menu ul {
      display: none !important;
}

Really appreciating your help Aditya.

It seems to be quite inconsistent. Sometimes the ‘scroller’ type menu appears, other times it doesn’t.

Do you know of a way to remove the ‘traditional’ menu (as it looks on Safari / Chrome) when on an iPhone/mobile, and replacing it with just the ‘scroller’ menu?

Or removing the ‘scroller’ menu and keeping the traditional menu, but making sure it’s fully functional, like it is in on a laptop (i.e. dropdowns work)

Actually, what I recommend is remove all modification that I asked to made (Just like when you asked question).
Report back here that you removed all modification.

Clear your iPhone’s browser’s cache. Reload.

Hi Aditya,

I cleared iPhone browsers cache, and removed all the css mentioned above.

When loaded on the iPhone, the menu was gone.

I re-applied the CSS and have changed some links on the menu, so at least it’s functional if using a phone (but still inconsistently sometimes showing ‘scroller’ menu, sometimes not).

Remove all modification. That will not gonna solve this problem.

Go to Cloudflare.com and set Rocket Loader: Off.
Problem solved.

Hi Aditya,

Right now – it’s running no additional css and rocket loader is: off. Also turned off js, css and html caching in Cloudflare.

Still no luck!

In jquery.js, it is giving following error:
Uncaught Error: Syntax Error, unrecognized expression: :nth-child

Can you disable all plugins? And check if issue is resolved.

Just disabled all plugins, and still not showing menu on phone!

It has something to do with ‘nth-child’ defined on other JS file.
I am unable to provide further support on it due to limitation to access theme file.

You need to contact theme author for support.

Also you’re using outdated version of your theme. This is most likely caused the issue, as I can see different /wp-content/themes/bigbangwp/javascript/custom.js on comparing your site’s and demo site’s file.

Upgrading theme to latest version will likely to solve your problem.