Mobile Menu Help!

Hi Paul,

You can use the GP Off Canvas Panel. Reference: https://docs.generatepress.com/article/off-canvas-panel-overview/

Then, as for the Social Icons, you can add these through GenerateBlocks.

Here is an example of how to add them: https://www.youtube.com/watch?v=yAleVWQi5EA

Hook the Block Element to after_slideout_navigation.

Thank you!

So I have that part pretty much all set - I’m looking to see if I can add borders underneath that to the whole way and add little arrows or an icon like in the sample.

Also is there a way when the menu slides out to have it below the header and not cover it?

Thank you so much!

Paul

Hi Paul,

For reference, can you provide the link to the site in question?

I'll see what can be done.

You may use the Private Information field for this: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

No problem!!!

Here is the site I am working on:
https://www.givepraiserecords.com

Thank you!!!

To add the lines and the arrow, here's something you can try adding through Appearance > Customize > Additional CSS:

.main-nav > ul > li:after {
    content: "\27A4";
    margin-right: 8px;
}

.main-nav > ul > li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: solid 1px #fff;
}

Here's something you can try to put the Off canvas a bit below the Header:

nav#generate-slideout-menu {
    top: 99.5px;
    background-color: red;
    height: calc(100vh-60px);
}

This is amazing!!!! Thank you!!!! One more thing - is it possible to not have the dark screen over the body of the website when the menu is open?

You're welcome! It's possible.

Try adding this as well:

body.offside-js--is-open .slideout-overlay {
    opacity: 0;
}

This is amazing!! Thank you so much! One. Oh e quick question
- is it possible to get rid of this X icon on the pull out menu?

Here it is circled:
https://imgur.com/a/ZJegJIa

Can you try adding this?:

nav#generate-slideout-menu button.slideout-exit{
    display: none;
}

Totally perfect!! You and the entire crew over there are so awesome!!

Life Long customer for sure!!

Thank you!!

You're welcome, Paul! Have a nice day!