[Resolved] Menu not working on mobile

[Jo]

Hi, I installed GeneratePress yesterday. I run it successfully on another site but on the new site I can’t get the menu to work properly on mobile. Under primary navigation, the top-level menu displays ok but the sub menu items don’t display/drop down.

As a work around, I’ve switched on Off Canvas Panel for mobile, which I’m happy to keep. However, none of the style changes filter through. The menu is misaligned and only shows in blue even when I’ve chosen left align and a white/black/grey colour scheme. I also can’t seem to edit the style of the primary/desktop menu. I’ve been going through a loop of changes all day and have hit a wall.

I have switched off all plugins to test and that doesn’t fix it. I’ve cleared the cache repeatedly.

I’m also having issues with the style not displaying on another plugin (Strong Testimonials). I’m using their support team for that but mentioning here in case it’s a general style issue on my site.

https://visitproseccoitaly.com

Thanks for your help 🙂

[David]

Hi there,

the colors for the Off Canvas panel can be set in Colors > Off Canvas.

What other styling issues are there ?
If you want to disable the off canvas temporarily i can take a look at what the original problem was

[Jo]

Hi David, thanks for getting back to me so quickly. I’ve disabled Off Canvas. I had set a colour palette (without having the more indepth Colour add-on activated). I have activated and will see if that fixes the Off Canvas colours. In terms of style, I’ve attached a screenshot: https://visitproseccoitaly.com/wp-content/uploads/2021/09/Screenshot-2021-09-29-at-16.23.19.png

I set the menu to left aligned but it doesn’t filter through into the live site. The items in the red box, for example, are all sub-items of the ‘Tours’ header and I’d like them indented or otherwise obvious as a sub-menu item and all left aligned.

However, if I can fix it, my preference would actually just be to have the primary navigation working. The current site is showing primary menu (no drop down on mobile). On the desktop site, I can’t get the style working there either – there is a strange box on the left of each sub-item. And the menu items sit behind the site’s copy making it difficult to read. And finally on desktop style, the sub-menu opens really far to the right of the main menu item.

Hopefully these are easy fixes (though I’ve tried various things). Thanks for your help!

[Ying]

Hi Jo,

For desktop dropdown menu, can you check if you have this CSS added:

.main-navigation ul ul {
    width: 20px;
}

If so, please remove it.

For the mobile, to align the menu item left, give this CSS a try:

.slideout-navigation.do-overlay .inside-navigation .main-nav {
    width: 250px;
}
#generate-slideout-menu.do-overlay .slideout-menu li {
    text-align: left;
}

And it’s better to add some different colors for the sub menu items, so they won’t look the same as the parent menu items.

Let me know if you need further assistance 🙂

[Jo]

Hi Ying, I haven’t added any CSS to Generate Press. Also, I’d prefer to get the primary navigation working rather than tweaking the alignment of the Overlay. Can you help with that?

Also, do you have suggestions for the other issues:

– primary menu aligning too far right on desktop
– also primary menu/desktop – how do I get rid of the strange grey marker at the side of each sub-menu item?

Thanks!

Jo

[Jo]

Hi Ying, to add: I tried altering the colour on the primary nav menu (background for sub-menu) and the only thing I can alter is the colour of the strange block on the right. I’ve left it pink on the site so you can see it clearly. The rest of the sub-menu remains black text on a transparent background. I’ve tried altering all of the colours and can’t change this.

Thanks.

Jo

[Ying]

– primary menu aligning too far right on desktop

If you haven’t added CSS, can you go to customizer > layout > primary navigation, check what the Sub-Menu Width is?

If it’s set to 200px, then there might be some cache going on which is overriding the customizer settings.
https://www.screencast.com/t/rp8KopP5hgJ

You need to clear your cache including server cache.

I’d prefer to get the primary navigation working rather than tweaking the alignment of the Overlay

Then can you deactivate the off canvas menu so we can see what the normal menu look like on mobile?

also primary menu/desktop – how do I get rid of the strange grey marker at the side of each sub-menu item?

As you can see, if the cache is cleared, your sub menu would look like this:
https://www.screencast.com/t/ss2NDlWH1r

The grey color is what you set for the sub menu background color.

[Jo]

Hi Ying,

Thanks for your help 🙂 It mostly seems to be fixed night. You were right. It was related caching even though I’d cleared the site cache many times. In the end I got my host to fix the issue for me. Still got a problem in that I can’t get the Off Canvas Menu to look good but I am going to reduce the sib-menu items anyway so that will fix it. Thanks for your support 🙂

[Ying]

You are very welcome Jo 🙂

Glad it’s fixed!

[Author]

Posts