Hamburger Menu Button Not Working Only on Safari Mobile

Tagged: menus, Responsive Design

This topic has 21 replies, 2 voices, and was last updated 4 years, 9 months ago by erikcave.

Viewing 20 posts - 1 through 20 (of 22 total)

1 2 →

Author

Posts
December 16, 2020 at 4:54 pm #268255

erikcave
Participant

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!

December 17, 2020 at 1:37 am #268285

Skandha
Participant

@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

December 23, 2020 at 5:33 pm #268815

erikcave
Participant

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

December 23, 2020 at 5:49 pm #268817

erikcave
Participant

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.

December 23, 2020 at 5:54 pm #268818

erikcave
Participant

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.

December 23, 2020 at 6:12 pm #268819

erikcave
Participant

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!

December 25, 2020 at 5:19 am #268942

Skandha
Participant

@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

December 29, 2020 at 1:02 pm #269265

erikcave
Participant

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.

January 4, 2021 at 1:16 pm #269829

erikcave
Participant

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

January 4, 2021 at 5:24 pm #269852

erikcave
Participant

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

January 6, 2021 at 5:39 am #270042

Skandha
Participant

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

Kind Regards,
Skandha

January 6, 2021 at 3:56 pm #270075

erikcave
Participant

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.

January 7, 2021 at 12:57 am #270116

Skandha
Participant

@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

January 7, 2021 at 2:51 pm #270211

erikcave
Participant

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.

January 8, 2021 at 3:51 am #270292
Skandha
Participant
@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
January 9, 2021 at 12:37 am #270363

erikcave
Participant

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;
}

January 9, 2021 at 9:53 am #270408
Skandha
Participant
@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
January 12, 2021 at 5:51 pm #270735

erikcave
Participant

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

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

January 12, 2021 at 11:12 pm #270764
Skandha
Participant
@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
January 15, 2021 at 7:56 pm #271079

erikcave
Participant

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