[Resolved] off canvas menu like in “Chaplin” theme

[Hermann Josef]

Hello,

I would like to build an off canvas menu for my site, that looks like the menu in the “Chaplin” theme (https://andersnoren.se/teman/chaplin-wordpress-theme/)

Also I would like to use this menu as primary navigation so that it is shown as hamburger menu in all desktop and mobile sizes.

Is it possible to achieve this with Generatepress?

Thank you very much for hints and instructions.
Yours, Hermann Josef

[Ying]

Hi Hermann Josef,

I would like to build an off canvas menu for my site, that looks like the menu in the “Chaplin” theme

With some custom CSS you should be able to replicate the off canvas menu of the example site.

Also I would like to use this menu as primary navigation so that it is shown as hamburger menu in all desktop and mobile sizes.

You can create a new menu with no menu item at all, then assign it to the primary navigation.

Set off canvas panel to on. (Remember to assign a menu to off canvas panel)

[Hermann Josef]

Thank you very much, Ying!

You can create a new menu with no menu item at all, then assign it to the primary navigation.

Ah, this works fine, thank you!

With some custom CSS you should be able to replicate the off canvas menu of the example site.

This sounds good. Is there anywhere a documentation of the relevant CSS-classes?

Thank you, yours,
Hermann Josef

[Ying]

Is there anywhere a documentation of the relevant CSS-classes?

Not really. If you can link us to your site ( you can use the private info field), we can point you to the right direction based on what you’ve already achieved.

Let me know 🙂

[Hermann Josef]

Thank you, Ying! Please excuse my late reply. As a beginner I am busy learning Generatepress…

I have provided the link to my site in the private field.

There are mainly two things I would like to change in the off canvas menu:

1) The width of the complete menu; therefore it would be good to know the appropriate css-selectors for the different screen widths (desktop, tablet, smartphone). There are different id’s and classes: generate-slideout-menu, main-navigation etc. and I am not sure which one I should change…

2) The appearance of the menu items; maybe it’s “.main-navigation li” I should change…?

Thank you very much!
Yours, Hermann Josef

[Ying]

1) The default slide-out menu width is 265px for all screen width. You can try this selector:

nav#generate-slideout-menu {
    width: 500px;
}

2) Appearance is complicated, there’re too many levels of elements, for example, you can try this for:
menu item: nav#generate-slideout-menu .main-nav > ul > li
menu item link: nav#generate-slideout-menu .main-nav > ul > li > a
sub-menu-item: nav#generate-slideout-menu .main-nav > ul > li > ul > li
sub-menu-item link nav#generate-slideout-menu .main-nav > ul > li > ul > li > a

It’s very necessary to learn how to use developer tool if you want to write CSS: https://developer.chrome.com/docs/devtools/

We can not remember all the selectors, we just use the developer tool to find it out when we need to 🙂

[Hermann Josef]

Thank you very much, Ying. I think, these are good starting points for my own customizations.

Yours, Hermann Josef

[Ying]

You are welcome 🙂

Hope you’ll enjoy the customizations!

[Author]

Posts