[Resolved] Off canvas menu – Overlay

[ammgbr]

Hello two Qs re the mobile version of off canvas menu set in the overlay mode.

1. How could I have the menu items in the left hand side rather than centrally and without the vertical line by their side?

2. How could I remove the MENU writing and just have the menu icon?

GP Premium: 2.0.3

[Ying]

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 🙂

[ammgbr]

Thank you
Yes link provided

[Ying]

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 🙂

[ammgbr]

I tried that but did not work

[Ying]

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 🙂

[ammgbr]

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

[Ying]

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?

[ammgbr]

Cache cleared.

This is all the code I have in my CSS:

*deleted*

[Ying]

You are missing a } after

div#page {
padding-top: 50px;

[ammgbr]

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

[Ying]

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;
}

[ammgbr]

Thank you that works 🙂

[Ying]

No problem 🙂

[Author]

Posts