[Resolved] Mobile Logo and Opening Menu Slideout

Home Forums Support [Resolved] Mobile Logo and Opening Menu Slideout

Home Forums Support Mobile Logo and Opening Menu Slideout

  • This topic has 25 replies, 3 voices, and was last updated 5 years ago by Tom.
Viewing 11 posts - 16 through 26 (of 26 total)
  • Author
    Posts
  • #803923
    Leonardo

    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

    #804113
    David
    Staff
    Customer Support

    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;
        }
    }
    #804230
    Leonardo

    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

    #804244
    David
    Staff
    Customer Support

    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.

    #828739
    Leonardo

    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!

    #828741
    Leonardo

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

    #828957
    Tom
    Lead Developer
    Lead Developer

    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!

    #829013
    Leonardo

    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

    #829713
    Tom
    Lead Developer
    Lead Developer

    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;
    }
    #831342
    Leonardo

    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!

    #831663
    Tom
    Lead Developer
    Lead Developer

    No problem! You too 🙂

Viewing 11 posts - 16 through 26 (of 26 total)
  • You must be logged in to reply to this topic.