Styling / Unordered list

Hi @vladav, in Admin, use the menu to go Tools > Menu In Post Tools, and make sure you select “List of Links” for the Style dropdown when you create a menu shortcode that you want to be a simple unordered list.

A Menu In Post menu shortcode for an unordered list will look like this:

[menu_in_post_menu menu=3 style="list"]

Where the “style” is listed as style="list" to give you the menu in an unordered list.

A dropdown menu shortcode will be: style="dropdown"

You can change a “dropdown” style menu shortcode that you’ve already pasted into a post in the WordPress editor from a dropdown to an unordered list by simply changing the style attribute in the shortcode from “dropdown” to “list”.

If you’re still not getting an unordered list of the menu items with the style="list" attribute in your Menu In Post shortcodes, it may be that your theme’s CSS is overriding the default styling of unordered lists and giving you something else, in which case you can add a custom class to your Menu In Post shortcodes, then add custom CSS to style the menus as you like without altering your theme’s CSS.

Does that answer your question?

You’re welcome. I’ll leave this unresolved for now in case you have more questions, and close it in a couple of weeks if I don’t hear from you.

Sure, if you post the URL, I’ll take a look.

It looks like you have the CSS in there correctly for the “vop” class, which is set as an attribute for the menu as it should be, and the menu is being rendered in the HTML correctly by Menu In Post, but for some reason I haven’t been able to figure out, your CSS for the list style is being ignored, despite it not showing as overridden (crossed out) in Firefox Developer Tools.

There is a list-style-type: none; further up the hierarchy for .site-footer .container .padder > ul > li, which might prevent your CSS from having an effect since your menu is an unordered list within the unordered list in .padder that makes up the footer, but even when I remove that rule, the list style rules you’ve set don’t work.

According to ChatGPT:

If a parent UL (or LI) has a shorthand like list-style: none (or
list-style-type: none) applied, that can suppress markers for descendant
lists in many browsers, so child ULs may not show bullets even when
their own rules appear in DevTools. The child’s rule can show (not
crossed out) but the marker still won’t render because the ancestor’s
list-style setting prevents the browser from generating markers for the
list subtree.

Resetting the full shorthand on the specific child list fixes it (not
just list-style-type). Example to add to your stylesheet: ul.vop {
list-style: disc outside none !important; }

I couldn’t get that to work on your site

The menu looks like it’s being rendered just fine to me, and your site looks good to me, so if it were me I would probably leave it as is, but if you want some kind of list-item marker there, a possible workaround would be to use a pseudo-element with the following selector:

.vop > li > a::before {
	content: " • ";
}

When I try that, it puts a bullet before each link in your menu and looks pretty good, though when I don’t translate the page to English, it causes your “Privacy Policy” line to wrap.

Please post the solution if you discover one. I’d like to know why it’s not working as well. If ChatGPT is correct that a parent declaring list-style: none or list-style-type: none is responsible, maybe there is one further up the hierarchy I didn’t see that’s preventing us from setting it.