Off canvas menu - Overlay

Hi Polyvios,

For question 1, can you link us to the site in question?

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

For question 2, go to Customizing > Layout > Primary Navigation, remove the Mobile Menu Label.

Let me know :)

Thank you
Yes link provided

Give this CSS a try:

#generate-slideout-menu.do-overlay .slideout-menu li {
    float: none;
    width: 100%;
    clear: both;
    text-align: left !important;
}
.slideout-navigation.do-overlay .menu-item-has-children .dropdown-menu-toggle {
    border-left: none !important;
}

Let me know :)

I tried that but did not work

I don't see the second part has been added to your site yet, can you confirm?

I've edited the CSS here:
https://generatepress.com/forums/topic/off-canvas-menu-overlay/#post-1933024

Let me know :)

Still does not work

I want the off canvas menu to appear on mobile only. On desktop view I only want the primary navigation menu - apologies I should have clarified that earlier

I managed the second part - removed the 'menu' and only have the icon on mobile

The CSS you added is still the old one, hasn't been updated:
https://www.screencast.com/t/PzWdyxquTBI

And I still don't see this part of CSS on your site yet:

.slideout-navigation.do-overlay .menu-item-has-children .dropdown-menu-toggle {
    border-left: none !important;
}

Have you cleared cache?

Cache cleared.

This is all the code I have in my CSS:

*deleted*

You are missing a } after

div#page {
padding-top: 50px;

Oh - many thanks :)

It works

Re layout how could I tidy it up?

1) The the exit icon X is in the middle of the screen just above the menu items so it is a bit distracting. Is it possible to have it on the right upper corner - would look more slick

2) The same for the different menu items dropdown icons - could they be on the far right side, all aligned at the same level?

3) When selecting each menu item the background changes to green but partially - could the whole row change colour to green when the menu item is selected?

The arrangement a bit like the mobile version of the ft.com menu

Apologies for the requests - these are small things but would massively improve the navigation layout

Try this CSS:

.slideout-navigation.do-overlay .slideout-exit {
    justify-content: flex-end;
    display: flex;
    width: 100%;
}

.slideout-navigation.main-navigation .main-nav ul li a {
    display: flex;
    justify-content: space-between;
}

Thank you that works :)

No problem :)