Controlling Dropdown Link Attributes

Currently I see that I can control the color, size, position of the dropdown stack button, but the underlying links themselves are white, positioned on the left, and have no controls for changing for example the width of the link, nor the background color.
Is there a way to control these with CSS formatting?
Thanks

I’m sure we can help you with some CSS to adjust those things. It would be easier if we have an url to a page you’re trying to do this on. Even a temporary page would help. If not, then a couple of screenshots from preview would help. We’d also need a list of what you’d like to change.

https://media.familyhistory.education/documents/preserve-documents.html
The dropdown stack is down at the bottom of the page. I know the ‘button’ is large (long), but it just fits nice down there. On dropping down the elements stay to the left and because the background is white, the dropdown choices may not easily be seen.
Change background is the principal focus. Can the dropdown items be centered? The width of the list is probably just dependent on the amount of text, but it would be nice, even for future projects, to know if that width can be coded.
Thanks for looking at this!

So, something like this?

.dropdown-menu {
	width: 100%;
	background-color: #cecece !important;
	text-align: center !important;
}

Change the color to any hex value you’d like.

Leave out “!important” and add if you don’t see the change. It’s better not to force a style with that, if you don’t have to.

1 Like

That works great. How do you find out the name of the object? “dropdown-menu”. If there is another stack on a page, and you wanted to put some CSS code like on w3schools.com, I just don’t know where to find the object’s name.
What if I wanted to put a border-style: inset on that section? That property does not seem to work.
Thanks a lot for your help in this. I already changed the color and played with other CSS attributes as well.

I use Safari Developer Tools (enable in Preferences → Advanced). Once enabled, you can right-click on any part of a page and view the actual HTML code and figure out the IDs and classes assigned to them. You can also see all of the styles applied, etc. There’s lots of info out there on using developer tools in any of the browsers.

As far as border style, you probably need a border width set as well. I’m not at my mac to check for you right now.

This a handy video about the Safari Web Inspector:

Yep…needed to have a border width also in there. Hey thanks so much for your direction. This gives me some help with applying CSS properties to some of the stacks. By chance, do you know anything about the HTML box that is often in the right stack panel? Where do I find more information on how to use that?
image

Wow…that was a quick overview of the web inspector. I have had it installed, but have mainly used the developer tab to clear the browser cache. I will have to explore more to see if I can find the names of the different stack components that I have on a web page. For example, “.dropdown” being associated with the Foundry dropdown stack.

Thanks for your help!