Jump to content

Changing dropdown menu color, font, corners, and opacity

Recommended Posts

Hi, is there another way to change the dropdown menu color, font, corners, and opacity besides using Custom CSS?

If it has to be through Custom CSS, I probably need to hire someone to do it for me since all I can do is use AI to come up with something (that doesn't work).

Thank you!

Link to comment
  • Replies 5
  • Views 284
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

@GTStairs Hi! You can change the dropdown color and font only by editing the Site header . Any other modifications would require Custom CSS. If you could provide your site URL, I'd be happy to assist with the Custom CSS code. Also, you might find other similar questions in this forum related to your inquiry.

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment

Hi, yes, I skimmed through the forum. But I feel pretty lost. It would be great if you could help me and I can compensate you too. Hopefully it is not too much work.

Please message me if you want to proceed. Thanks!

Link to comment
Posted (edited)

  

4 hours ago, GTStairs said:

Hi, yes, I skimmed through the forum. But I feel pretty lost. It would be great if you could help me and I can compensate you too. Hopefully it is not too much work.

Please message me if you want to proceed. Thanks!

 

 

Hey, depends on everything you want done, but if you just wanted a color change... try this

//CUSTOMIZE MENU DROPDOWN
div.header-nav-folder-content {
  background-color: rgba(255,230,0,1) !important;
  color: white;
}
}

 

1. "div.header-nav-folder-content" is telling WHAT to be targeted by the code. in this case, the header's navigation FOLDER content is being targeted. every item has its own designation or codename.

2. "background-color" is telling the entire menu/header folder (targeted above) what background color to be using rgba color codes. You can look up color codes or use this tool to find whatever color you want -> https://rgbcolorpicker.com/
*NOTE* you also mentioned opacity. If you want to change the opacity thats the LAST number of the rgba code. Its on a scale of 0.0 - 1, with 1 being 100%. So if you wanted it half transaprent, your code would be "rgba(255,230,0, 0.5)"

3. "color" is telling the text what color to be IF you didn't set that already.

4. what did you mean by corners? Did you want to round the corners of the dropdown folder?

5. when you said font, did you mean a custom font? or just the color as mentioned above?

Edited by LeauxFi
Link to comment

So far everything is working like you said. Thank you.

Yes, I want rounded corners of the dropdown menu.

Also the dropdown menu seems wider than I would want. I don't know if that is also CSS or it's in the Styles section.

I've attached a screenshot. I hate asking for coding help since I don't know it, so thank you so much! 

Screenshot 2024-06-07 at 9.58.53 AM.png

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.