Mobile Logo and Opening Menu Slideout

Hello,
this is the PDF with the mobile menu that my customer would like have in your site:

http://www.demowordpress.it/monaldesca/wp-content/uploads/2019/02/Menu-Mobile.pdf

Thanks a lot!

Leonardo

1. Align mobile toggle:

#mobile-header .menu-toggle {
    margin-left: auto;
}

2. Center align slideout menu:

#generate-slideout-menu .slideout-menu li {
    text-align: center;
}

3. Full screen slideout - just to note this is coming to GPP 1.8 - so you won't need this in a future update:

3.1 First create a new Custom Menu item in your slideout menu.
Add the URL of: #
Give it a label of: <span class="slideout-exit screen-reader-text">Chiudi</span>

Add this CSS:

@media (max-width: 768px) {

    .offside--left.is-open,
    .offside-js--is-left .offside-sliding-element {
        -webkit-transform: translate3d(100vw, 0, 0);
        -moz-transform: translate3d(100vw, 0, 0);
        -ms-transform: translate3d(100vw, 0, 0);
        -o-transform: translate3d(100vw, 0, 0);
        transform: translate3d(100vw, 0, 0);
    }

    .offside--right.is-open,
    .offside-js--is-right .offside-sliding-element {
        -webkit-transform: translate3d(-100vw, 0, 0);
        -moz-transform: translate3d(-100vw, 0, 0);
        -ms-transform: translate3d(-100vw, 0, 0);
        -o-transform: translate3d(-100vw, 0, 0);
        transform: translate3d(-100vw, 0, 0);
    }

    .main-navigation.offside {
        width: 100vw;
    }

    .offside--left {
        left: -100vw;
    }

    .offside--right {
        right: -100vw;
    }
    .offside-js--is-right.slide-opened .slideout-overlay button.slideout-exit {
        right: auto !important;
    }
    .offside-js--is-left.slide-opened .slideout-overlay button.slideout-exit {
       left: auto !important;
    }
}

All perfect, thank! Just this question: I create a new Custom Menu item in your slideout menu, with # and label as you write, but I can't see the item "Chiusi".

If it's more easy, we can insert a "X" like before...

Thank you for your patience

The X should be output automatically by GP styles. The Chiusi is just the screen reader text, its not meant to be visible just there fore accessibility.

Hello David,
I'm here again for a problem: until last week everything was ok and I was able to fix the menu, to make it and put two sliders, one for mobile and the other for the desk.
Just before, I discovered that when I open the site on the desktop, the menu items overlap and those of the secondary menu (with the items of WPML), are noticeably larger, even the whole layout is not good. Finally, in mobile mode the slider does not occupy the whole screen as set.

I noticed that there was an update to Wordpress with version 5.1. Is it possible that this has caused such poblems? I add that I have just updated the plugins for which updates were available.

I'm pretty worried, because until yesterday everything was ok and I was about to deliver the site to the customer.

Thank you for your reply and have a nice day!

Sorry, the web site is: http://www.demowordpress.it/monaldesca

Hi there,

Your secondary navigation items don't seem to have any text inside the link elements: https://www.screencast.com/t/wI6FRpRm

Maybe it's a bug in WPML?

Your slideout seems to be full width on mobile for me, although there isn't a way to close it currently. Can you show us a screenshot of what you're seeing?

Thanks!

Hello, thanks to the backup of the hosting I restored WPML and now the secondary menu entries and slideouts are correct.
All other pages also work correctly, both on the desktop and on the mobile. At the moment these problems remain:
-the main desktop menu does not show everything and a voice overlaps with the logo.
-the slider of the home page does not occupy the whole page, both from desktop and mobile, and on mobile the menu does not occupy the entire screen (with David we implemented the code to achieve this effect, even if you did not see the closing X was good the same). I enclose the screenshots.

Thanks a lot!

http://www.demowordpress.it/monaldesca/wp-content/uploads/2019/03/Immagine.png

http://www.demowordpress.it/monaldesca/wp-content/uploads/2019/03/Screenshot_2019-03-05-05-31-50.png

1. This is an issue with the logo centering method. You'll have to either reduce the width of your menu items, or reduce the number of menu items in the navigation.

2. Try adding this CSS:

.flexslider li {
    padding-left: 0 !important;
}

Hi Tom,

I solved the problem, just a lines of css code interfered with the "li" of the slider and of the primary and secondary menus.

Now everything is ok, thank you very much for your patience!

Have a good day!

No problem! You too :)