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

[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?

[Leo]

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 🙂

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

[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.

[Leo]

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?

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

[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.

[Leo]

Try this CSS:

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

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

[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.

[Leo]

Glad I could help 🙂

Flexbox is awesome:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

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

[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.

[Leo]

No problem 🙂

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

[Author]

Posts