[Resolved] Off Canvas Panel Menu on Mobile – Add logo above Menu?

Home Forums Support [Resolved] Off Canvas Panel Menu on Mobile – Add logo above Menu?

Home Forums Support Off Canvas Panel Menu on Mobile – Add logo above Menu?

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1636144
    Kasia

    When I add a navigation menu to the off canvas panel via a widget in the Off Canvas it doesn’t work at all and I am unable to style anything. When I add it by assigning it in the GP customizer under, menu the widgets show up below the menu. I want to be able to add the company’s branding (a logo, their name, and tag line) before the mobile menu, Is this possible?

    #1636267
    Leo
    Staff
    Customer Support

    Hi Kasia,

    Try this CSS to move the slideout widgets before the menu:

    .slideout-navigation .inside-navigation {
        display: flex;
        flex-direction: column-reverse;
    }

    Adding CSS: https://docs.generatepress.com/article/adding-css/

    Let me know if this helps πŸ™‚

    #1637344
    Kasia

    Yes this worked great. Last question, probably a tall order. Is there a way to sandwich the menu? meaning if I wanted to add a widget after the menu, as well as before… The column-reverse trick worked great, and I’ll need to read up on this.

    Previously was using another plugin for this, but am trying to use fewer plugins so sites load faster and learn more native features of GP.

    Thanks for you help.

    #1637499
    Leo
    Staff
    Customer Support

    Is there a way to sandwich the menu? meaning if I wanted to add a widget after the menu, as well as before

    Should be doable with CSS. Can you add the widget you want to appear after the menu in and I’ll provide the code?

    #1637515
    Kasia

    Done! Hoping to place the “serving addison…” below the menu (while leaving the logo and care of fine landscapes at the top above the menu). Thank you so much for the help. I’ll have an example to follow forever after.

    #1637657
    Leo
    Staff
    Customer Support

    Try this CSS:

    .slideout-navigation .inside-navigation #custom_html-8 {
        order: -1;
    }
    #1638558
    Kasia

    Wow you are a genius. Thank you. I will do my best to figure out why and how that worked so that I can apply it to future projects.

    Thank you again.

    #1638664
    Leo
    Staff
    Customer Support
    #1638668
    Kasia

    Thank you always something new to learn. Will have to get this stuff under my belt. Thank you again for everything and pointing me to this resource.

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