[erikcave]

Using Catch Everest Pro theme the hamburger menu button that appears on a mobile device when Responsive Design is enabled is not working only on the Safari Mobile Browser. The hamburger menu button will bring up a menu, but after making a selection I stay on the current page. This only happens using Safari Mobile. Chrome and Edge mobile work just fine.

I have tried going into Appearance-customize-Theme Options-Responsive Design and toggled the box under “Check to Disable Responsive Design” to turn it off and back on again. This did not fix the problem.

The website is pacnwc.org

Thanks for your help!

[Skandha]

@erikcave: Hello there,
I checked your site and you seem to be using an older version of the theme. Can you please update the theme to the latest version and check if the issue is resolved?

Let me know if the issue persists!
Kind Regards,
Skandha

[erikcave]

Thanks for pointing out that my theme was out of date. I didn’t realize that. Should I not get a notification for an update? I see that with WP 5.5 the Catch Tools Update option is no longer available. I disabled the Catch Tools Plugin, but do not see any way to update. How do I update the theme now?

Thanks

[erikcave]

Nevermind, for some reason the license key field was blank. I entered mine and now it has updated, and seems to have fixed the problem.

The new problem is that the menu colors are all weird. I will work on that.

[erikcave]

Also, I just noticed the menu is all messed up on the desktop browser as well. It is spread out vertically instead of selectable buttons across the top.

[erikcave]

I am going to step away from this for a while. I can’t seem to fix the menu problem on my own. I tried changing a bunch of layout settings, but nothing made a difference. I have also disabled any non essential plugins. Right now in the browser I am using to edit the page it shows the menu spread out vertically at the top of the page. It looks just like the mobile menu would. I am looking forward to your input.

Thanks!

[Skandha]

@erikcave: Hello there,
I checked your site and the menu seems to be showing up fine. Are you still having the issue?

Kind Regards,
Skandha

[erikcave]

Thanks for checking it. In both Chrome and edge I still see the menus as described. However, on both, if I load the page in an incognito tab it is fine.

[erikcave]

Just checking in on this. Any advice on how to fix the menus? It still shows all spread out vertically in my main Edge or Chrome. If I load the page in an In-Private window in either it looks fine.

Also, now on mobile the background of the menu is really dark making it difficult to read the options.

Thanks

[erikcave]

Another quick update, other users are also reporting seeing the menu all spread out like I am.

[Skandha]

@erikcave: Hello there,
Can you please attach a screenshot of the issue so that I can look into it?

Kind Regards,
Skandha

[erikcave]

I don’t see an option to post a screenshot. Here is a link to a screenshot I hosted on our site:
http://pacnwc.org/screenshot_20210106-125302/
This is the menu system on the mobile version. You can see that the text is black for the sub menus making it difficult to read.

The desktop problem seems to have resolved itself.

[Skandha]

@erikcave: Hello there,
Go to => Appearance => Customize => Additional CSS and remove the following CSS Code.
ul { padding-left: 30px; }

Let me know if this works out!
Kind Regards,
Skandha

[erikcave]

Thanks for the input, but that didn’t fix it. It changed the alignment, but that wasn’t the problem. The problem is that the submenu text is black instead of white.

[Skandha]

@erikcave: Hello there,
Go to => Appearance => Customize => Additional CSS and remove the following CSS Code.

.main-navigation ul ul a {
    color: #fff;
}

Let me know if this works out!
Kind Regards,
Skandha

[erikcave]

Thanks again, but I don’t see that code listed there. I do see this:

body.home h1.entry-title {
display:none;
}
.textwidget h1 {
display:none;
}

[Skandha]

@erikcave: Hello there,
Can you please try deactivating all the plugins and then check it the issue is resolved?

If the issue persists
Go to => Appearance => Customize => Additional CSS and remove the following CSS Code.

.main-navigation ul ul a, #footer-menu ul.menu ul a {
    color: #fff;
}

Let me know if this works out!
Kind Regards,
Skandha

[erikcave]

I tried disabling all plugins, that didn’t help.

Again, I don’t see that code under additional CSS.

[Skandha]

@erikcave: Hello there,
Go to => Appearance => Customize => Additional CSS and addthe following CSS Code.

.main-navigation ul ul a, #footer-menu ul.menu ul a {
    color: #fff;
}

Let me know if this solves the issue.
Kind Regards,
Skandha

[erikcave]

That fixed the problem for the mobile menu, but then it makes the desktop menu unreadable because the text is white on a white background.

[Author]

Posts