[Resolved] Menu on desktop and mobile

[Giselle]

Hi,

If I set the main menu to hover (in Layout), it does not show the dropdown (secondary nav) on mobile.

If I set the menu to: click-arrow, it only shows the top-level pages on desktop and mobile.

If I set the menu to: click-Menu Item, it won’t show the top-level pages when clicked, just the dropdown menu, on desktop and mobile.

I need the top-level links to be clickable.

Ideally, I’d like to set the menu to hover on desktop and clickable on mobile.

Thanks for your help.

[Leo]

Hi there,

I’m not seeing any sub menu in the site you’ve linked.

Can you confirm?

[Giselle]

Hi Leo,

If you hover over Hire Space and About, you get a sub menu (dropdown).

I clicked on ‘no’ and got a message saying to email you directly, so will do that now.

Thanks,

Giselle

[Giselle]

Sorry, that was just about being happy about support, which I am, so will wait for your answer on here.

Thanks 🙂

[Leo]

You are using this CSS to hide the drop down arrow:

.menu-item-has-children .dropdown-menu-toggle {
    display: none;
}

Is that intended?

[Giselle]

Hi Leo,

Thanks. Yes, I wanted to hide the arrow. Weirdly, I can’t find it in ‘additional CSS’. Would you happen to know if there is somewhere else I can find it in the Generatepress settings?

I did want to hide the arrow, and ideally have a hover menu for desktop, but if the arrow version works, that would be OK.

Thanks,

Giselle

[Leo]

The CSS looks like it should be in Additional CSS in the customizer:
https://www.screencast.com/t/yvJuRvKp5

[Giselle]

Hi Leo,

Thanks. Sorry, not sure why I didn’t see that!

I’ve used a media query to hide the arrow above 812px, so it shows below that, and it’s working fine. It doesn’t work with or without the arrow setting on in Firefox Responsive Developer mode, but works fine with resizing the browser, so hopefully that’s just a Firefox Dev mode problem. I’l test it on a tablet and check.

Thanks for your help!

Giselle

[Giselle]

Resolved.

[Leo]

No problem 🙂

[Author]

Posts