Menu button not showing on certain pages on mobile

Sydney Pro
#1

Hey,

I’ve been designing my first site for a while now and I’ve recently discovered the menu button at the top of the ‘Contact’ page and also all my ‘Destination’ pages doesn’t seem to show on mobile.

I’ve tried to search for a solution and used a few different CSS codes, but to be totally honest I’ve never done anything like this before so I’m a little confused and quite frankly clueless haha!

My site is www.TheFootyTourist.com

Cheers

#2

Hi,

I am sorry to hear that you have run into issues. I am happy to help out.

Can you confirm whether you’re running the latest version of Sydney pro or not?

Regards,
Kharis
aThemes Support

#3

No worries. These things are all part of my journey to become better at running my site :slight_smile:

I’m not totally sure. I’m running Version: 2.0.25.

#4

Hi,

The latest version of Sydney Pro is 2.0.28. Can you try upgrading and letting me know whether updating resolves your issue or not?

Regards,
Kharis
aThemes Support

#5

Hey,

Just updated the theme and now my site isn’t loading at all on WP. It’s just stuck on the loading screen.

I’ve just switched browser and it seems to work on chrome, but it’s not my preferred browser. Any idea why this could be?

It seems to be working when access the site on my mobile too.

UPDATE - I got it to work again. However the menus are still not loading on mobile sites.

#6

Hi,

You may want to disable the preloader by using this plugin.

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    .mainnav.hidden {
      display: none !important;
    }

    .mainnav.hidden.toggled {
      display: block !important;
    }

    .mainnav .sub-menu.toggled {
      display: block !important;
    }

Regards,
Kharis
aThemes Support

#7

I just tried the CSS and the menu still isn’t showing up.

#8

Hi,

If you have some other CSS code that precede the code I suggested, there may be potentially an error found there. To check this, you can validade your entire custom CSS code with this tool: https://jigsaw.w3.org/css-validator/#validate_by_input.

Regards,
Kharis
aThemes Support

#9

Hey Kharis,

The tool suggested that all is working but the menu button still isn’t showing up.

A few extra details that might help you. When I hide the top section of each page for mobile the menu shows up, so it seems like the header is hiding the menu.

Also when I swipe to scroll through the slide show the menu becomes visible, but is not responsive when clicked.

I hope the extra info can help. It’s really quite frustrating.

#10

Hi,

Please try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (min-width: 1024px) {
      #mainnav-mobi ul.menu {
        position: relative;
        z-index: 9999;
      }
    }

Regards,
Kharis
aThemes Support

#11

I’ve just tried that and it still doesn’t seem to be working.

#12

Sorry, I am really clueless at this phase as I don’t get the issue to appear on your site on my end.

Can you take a screen recording to point me the issue you’re seeing and share it here in your reply?

Regards,
Kharis
aThemes Support

#13

Hey,

Here’s a video of my issue. The menu bars are not showing at all.

1 Like
#14

Hey Kharis,

I finally managed to fix it. Well, I got a web developer friend to look at it for me. It was an issue with the elementor templates I was using.

Thanks for all your help. I appreciate it.

Kind Regards and a happy new year.

-Sion

1 Like
#15

Hi Sion,

Glad to hear that you have been able to manage it by yourself. Thank you for letting us know. I really appreciate it.

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

#16