[Resolved] Customize full-screen overlay style off canvas panel

[Kai]

Hi,

The instruction to create full-screen overlay style off canvas panel is pretty comprehensive but could someone point me to the right direct on how to customize it please?

I would like to have headings above and a line below the menu with alignment and font sizing.

Many thanks

[David]

Hi there,

do you an example of what this should look like ? Eg. a mockup screenshot or other site. Let me know.

[Kai]

As requested, many thanks:

http://saxus.co.uk/wp-content/uploads/2020/05/off-canvas.png

[David]

Ok so the footer line “Take a look at our….” is simple enough.
You can add this using a HTML widget in Appearance > Widgets > Off Canvas

For the text above the Menu you would need add the HTML using a Hook Element:

https://docs.generatepress.com/article/hooks-element-overview/

Add your HTML to the hook content

Select from the Hook List: inside_slideout_navigation
Set Display Rules to Entire site.

Once you have them added i can help with some CSS for alignment if you need.

[Kai]

You are a star.

Yes, I can do with some help with alignment and margins for the menu list.

Thank you David!

[David]

Try this CSS:

.slideout-navigation .slideout-widget > div,
.slideout-navigation .slideout-widget > div a,
.slideout-navigation .slideout-widget > div span,
.slideout-navigation.do-overlay .inside-navigation .main-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.slideout-navigation .slideout-widget > div {
    flex-wrap: wrap;
    justify-content: flex-end;
}
.slideout-navigation .slideout-widget > div h6 {
    margin-bottom: 0;
}
.slideout-navigation .slideout-widget > div i {
    margin: 10px;
}
.slideout-navigation.do-overlay .inside-navigation .main-nav, 
.slideout-navigation.do-overlay .inside-navigation .slideout-widget {
    margin-right: 40px !important;
    margin-top: 20px;
}

#generate-slideout-menu.do-overlay .slideout-menu li, 
.slideout-navigation.do-overlay .inside-navigation {
    text-align: left !important;
}

[Kai]

Perfect! Many Thanks

[David]

You’re welcome

[Author]

Posts