[Support request] Remove drop down toggle in off-canvas slide menu

[Arved]

Hi, I am trying to remove via css the drop-down-toggle in an off-canvas slide menu (moving in from the right side). I am aware of several suggestions in the forum but couldn’t find one working for me.

My issue: When targeting .dropdown-menu-toggle or .menu-item-has-children .dropdown-menu-toggle or similar with “display: none”, the dropdown arrow icon disappears – but also the menu messes up completely. Whenever I get the icon to disappear in the main menu, with opening the submenu via click on the parent both of the following happens:

1. the main menu except the submenu disappears
2. the menu moves so far to the right that most of it is outside the screen to the right.

I am working on a staging server without any caching etc. This server is not accessible, therefore unfortunately I cannot provide a public link for checking.

Does anybody have an idea how I could remove the arrow menu dropdown toggle without messing up all the rest?

Thank you!

[Leo]

Hi there,

Any chance you can link us to the page in question?

You can use the private information field:
https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

Let me know 🙂

[Arved]

Hi Leo,

Thank you for the quick reply. I now compromised the menu on my production site for demonstration purposes: https://arvedgintenreiter.com/

I am trying to get rid of the arrow dropdown toggle next to Exhibitions – without breaking the whole menu in the process. Would be glad if you have an idea 🙂

Thanks,
Arved

[Ying]

I am trying to get rid of the arrow dropdown toggle next to Exhibitions

Does that mean you don’t want the submenu to show? Or do you just want to remove the arrow?

[Arved]

Hi Ying,

I’d hope to get rid of just the arrow. The submenu would then still expand when clicking on “exhibitions”. Just the arrow indicator is not needed.

Thanks.

[Ying]

Try this:

.slideout-navigation .dropdown-menu-toggle:before {
    opacity: 0;
    margin-left: -0.8em;
    visibility: hidden;
}
.menu-item-has-children .dropdown-menu-toggle {
    padding-left: 0;
}

[Arved]

Hi Ying,

Thank you for the code, works perfectly on the production server.

On staging the code triggers an odd behavior of the menu sliding to the right beyond the screen immediately after opening the submenu (click on “exhibitions”).

Since it works on production I am happy so far. In case you have an idea what might trigger the strange behavior on staging, I’d be glad for a hint. Otherwise this topic can be considered closed.

Thanks for having solved the main issue!!

Best,
Arved

[Ying]

In case you have an idea what might trigger the strange behavior on staging, I’d be glad for a hint.

I would need to see the staging site with that behaviour to do some investigating 🙂

[Arved]

Will try to figure it out first. Thank you!

[Ying]

No problem 🙂

[Arved]

Sorry for reopening this topic. I continue to have this strange behavior with the disappearing menu, and it’s driving me crazy. So far, I just figured out that is is linked to the Firefox browser and not the staging server. In chrome the code suggested above seems to work well.

The issue with Firefox browser:
1. With click on the hamburger icon the menu expands properly (main menu-items show, sub-menu hidden)
2. Expanding the sub-menu with click on menu-item “Exhibitions” opens the submenu, but immediately the whole menu slides to the right off-screen and is barely visible anymore. I think the main menu-items even completely disappear.

Website: https://arvedgintenreiter.com/

Does anyone have an idea how I could fix this?

Thank you!

[Ying]

Hi Arved,

I did some testing on firefox, and would recommend changing the Exhibitions link to #.

[Ying]

And can you try this CSS to smoothen the slide animation? If you don’t like the look of it, you can just ignore it 🙂

.offside--right.is-open{
    transform: translatex(-90vw);
}
.main-navigation.offside.offside--right {
    right: -90vw;
}

[Arved]

Hi Ying,

Your code works like a charm. Will have an eye on it for a day or two and mark it solved if no issue returns. Thank you so much for a great solution and even an animation improvement on top!

Best,
Arved

[Ying]

You are welcome   🙂

[Author]

Posts