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

Home Forums Support Customize full-screen overlay style off canvas panel

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1278777
    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

    #1279029
    David
    Staff
    Customer Support

    Hi there,

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

    #1279106
    Kai
    #1279280
    David
    Staff
    Customer Support

    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.

    #1282421
    Kai

    You are a star.

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

    Thank you David!

    #1282769
    David
    Staff
    Customer Support

    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;
    }
    #1282908
    Kai

    Perfect! Many Thanks

    #1282944
    David
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.