[Resolved] Customize Slideout Navigation

[FunkyCss]

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

[David]

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.

[FunkyCss]

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

[FunkyCss]

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

[FunkyCss]

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!

[David]

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

[FunkyCss]

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

[David]

Awesome – looks great. You’re welcome 🙂

[Author]

Posts