We're evolving to serve you better! This current forum has transitioned to read-only mode. For new discussions, support, and engagement, we've moved to GitHub Discussions.

css class syntax for sub-menu in Publii ?

September 1, 2022 at 3:40 pm #8155

[anonymous]

Dear all –

I am looking for the correct syntax for the css class for a sub menu…

Assuming the calls is defined as .sub-menu { margin-left: 25px; }

what do I have to put in “edit menu item” dialogue: .sub-menu or sub-menu or “sub-menu” ?

I have not found any hint in the Docs for Users nor in the Docs for Developers ….

Thanks in advance, Michael

September 1, 2022 at 4:57 pm #8157

Bob

Hi Michael,

I’m not sure if I understand you well, but there is no need to add any class while editing menu items.
Menu classes are added automatically depending on how the theme developer implemented them.

More about the CSS classes generated by Publii menus: https://getpublii.com/dev/default-publii-classes-for-using-with-css/#menu

September 1, 2022 at 5:18 pm #8159

[anonymous]

Hi, Bob,

thanks for the quick reply. In other words:

I built a website using WordPress, and the menu looks like this:

the CSS:

Now want to rebuild this site using Publii, but the menu indent does not work:

Therefore I want add a class in the macOS App (v0.40.2) under Menus > Add menu item > Edit menu item > CSS class

So the question is, what do I have to put in “CSS class” exactly ?

Best Regards, Michael

September 1, 2022 at 5:32 pm #8165

Bob

Add a CSS class without the dot.

If you use the CSS rules from the previous theme (WP), I recommend modifying the menu.hbs file ‎⁨(Documents ▸ ⁨Publii⁩ ▸ ⁨sites⁩ ▸ ⁨YOUR_SITE ▸ ⁨input⁩ ▸ ⁨themes⁩ ▸ ⁨YOUR_THEME ▸ partials) and replacing the current menu CSS classes with those of the WP CSS.

For example, replace the navbar__submenu with sub-menu

September 1, 2022 at 5:49 pm #8166

[anonymous]

ok, as I use the WP classes, I will follow your advise and rewrite the menu.hbs.

Thanks for your help,

Cheers, Michael