Styling list

Hi Peter,

Did you already fix this? When I look at your page, it doesn’t look like the image you linked to above.

When you create a dropdown menu shortcode in the plugin, it doesn’t include any specific CSS, just the HTML to build the menu, so the styling of the select element it creates will be inherited from your theme, and may not include classes specific to your theme that are used for other select elements the theme creates.

What I see on your page now is this:

.mip-drop-nav {
	margin-top: 5px;
	color: white;
	font-weight: 700;
}

so I think you already added a class and fixed it.

Hi

This CSS just affects the box and the text in it. Not the list or background. Maybe it has another class, but I can’t find it.

I have written:

.mip-drop-nav {margin-top: 5px;color:white; background: background: #6992a2; font-weight: 700;}

But the background don’t change, nor the text in the dropdownlist.

Se my images:

https://drive.google.com/file/d/1FVzc45_UeFN_4chTnd64oUq2ooGXycru/view?usp=sharing
https://drive.google.com/file/d/1VAk_UygP_sWxZCm3NAbQS2rSz5Sb0dBS/view?usp=sharing

Regards Peter

Hi Peter,

I’m with you now. I believe what you see with the drop-down part of the list is dependent on the browser, as what I see is different than what you show in your second image.

Take a look at this article at W3 Schools and see if it helps. With the custom class you added to your Menu In Post shortcode, I think you can get the effect you want, but note that they are using Javascript as well to accomplish it.

Thanks, but it doesn’t work. I have tried them all. I can’t find the class of the list in the dropdown on my page. Just for the button/heading, that I have fixed. Strange.

Peter

Did you add the Javascript? The Javascript is what does the magic with the dropdown, I believe:

a.setAttribute("class", "select-selected");

Hi @peter0013,

It has been a month since I’ve heard from you. Did you get this to work?

Hi @peter0013,

I haven’t heard from you in quite a while, so I’m going to mark this as resolved.