🎉 Happy 4th of July! Get 15% off GP Premium with the discount code: 4THOFJULY2020

[Resolved] Customize Slideout Navigation

Home Forums Support Customize Slideout Navigation

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1164916
    Dimazzio

    Halo so i am creating a new site with Elementor and GP and i need to customize my slideout navigation and to display like this link.

    Is possible to do it , i know with Elementor but i dont want , cause i like the menu to be worked with GP

    #1165424
    David
    Staff
    Customer Support

    Hi there,

    so this CSS for your desktop will get you the overlay and exit button requirements:

    /* Overlay Background color */
    #generate-slideout-menu.main-navigation {
        background-color: rgba(0,0,0,0.75);
    }
    
    /* create inner ovelay for navigation */
    #generate-slideout-menu.do-overlay .inside-navigation {
        background-color: rgba(255, 255, 255, 0.75);
        max-width: 1400px;
        box-sizing: border-box;
        padding: 40px;
        margin-top: 200px;
        /* Create Inner Row */
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    /* reposition slideout exit */
    #generate-slideout-menu.do-overlay .slideout-exit {
        position: static;
        margin-top: -120px;
        margin-bottom: 40px;
        /* Force Slideout to own row */
        flex: 1 0 100%;
    }
    
    /* Display screen reader close text for exit */
    .slideout-exit .screen-reader-text {
        position: static;
        text-transform: uppercase;
        font-style: italic;
    }
    #generate-slideout-menu.do-overlay .inside-navigation .main-nav {
        margin-left: unset;
        margin-right: unset;
    }
    
    /* Style first menu items separately */
    
    #generate-slideout-menu.do-overlay li:first-child a {
        font-size: 24px;
    }

    Then remove the Menu from the Off Canvas.
    Create 2 x new menus, one for left and one for right. You’ll only need the submenu content.

    Then add them to the Off Canvas Widget area using the Navigation Menu widgets. Once thats done i can help with some CSS to create the columns.

    #1165927
    Dimazzio

    Hi David! Wow that was amazing ! Thank you so much ! i am looking the code amazing .

    So i have created two Menus with pages and i have given to the widgets the titles and insert them to the of canvas , you can see the link , is this how you wanted to be ?

    I pay for the coffee today ! 🙂

    #1165935
    Dimazzio

    Sorry i have to change the Widget Titles with an actuall link , so i will make them Pages

    #1165937
    Dimazzio

    So the first menu items are the big ones , should i make the submenu content submenu ? i have made them one below the other . thank you for your precious help David once again!

    #1166081
    David
    Staff
    Customer Support

    Made a couple of changes and added a new rule for the first menu item styling in the CSS here

    #1167885
    Dimazzio

    Hi David ! yeap this did the work ! and works perfect ! this is a nice idea to work on next projects too i like this style of slide out nav .

    Once again i dont know how to thank you ! 🙂

    #1168124
    David
    Staff
    Customer Support

    Awesome – looks great. You’re welcome 🙂

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.