[Resolved] Customize Slideout Navigation

Home Forums Support Customize Slideout Navigation

This topic contains 7 replies, has 2 voices, and was last updated by  David 4 days, 10 hours ago.

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

    Κατασκευη Ιστοσελίδων https://www.funkycss.com

    #1165424

    David 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 ! 🙂

    Κατασκευη Ιστοσελίδων https://www.funkycss.com

    #1165935

    Dimazzio

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

    Κατασκευη Ιστοσελίδων https://www.funkycss.com

    #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!

    Κατασκευη Ιστοσελίδων https://www.funkycss.com

    #1166081

    David 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 ! 🙂

    Κατασκευη Ιστοσελίδων https://www.funkycss.com

    #1168124

    David 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.