Dropdown Menu colour Squarespace 7.1

33 minutes ago, COASTANDCROP said:

 Hi There, 

I have tried using this for a different colour drop downbox, however it goes black. 
I'm hoping to have a transparent background where only the words show with no colour. 

Is this possible? 

Thank you!

Can you share site url?

https://www.knbdirect.com/

Hey everyone, I tried to piece together all the different the CSS codes for the dropdown menu but it didn't work.

--the background to be black

--50% transparent

--the text of the dropdown to be white (so it can show against the black background)

--automatically match the width of the dropdown to the text (currently have it set to 135px wide, but would prefer auto if that's possible)

--want the text to be highlighted when the mouse is it (only works on the folder being visited, its currently set to be a shade lighter, but i just want to apply that to all of the folders)

When I tried to put all the codes together, it basically crashed the site, so I'm a little scared to fiddle with it now.

Add to Home > Design > Custom CSS
 

.header-nav-folder-content {
    background: rgba(0,0,0,0.5) !important;
}
.header-nav-folder-content * {
    color: white !important;
}

Looking much better. Is there a way that I could make the links be highlighted when the mouse is on it? I just want it to be a shade or 2 lighter

21 hours ago, Momo96 said:

Looking much better. Is there a way that I could make the links be highlighted when the mouse is on it? I just want it to be a shade or 2 lighter

Add to Home > Design > Custom CSS

.header-nav-item a:hover {
    background-repeat: repeat-x;
    background-image: linear-gradient(to right,currentColor 100%,currentColor 0);
    background-size: 1px 1px;
    background-position: 0 calc(100% - 0.1em);
    white-space: initial;
}

5 hours ago, tuanphan said:

Add to Home > Design > Custom CSS

.header-nav-item a:hover {
    background-repeat: repeat-x;
    background-image: linear-gradient(to right,currentColor 100%,currentColor 0);
    background-size: 1px 1px;
    background-position: 0 calc(100% - 0.1em);
    white-space: initial;
}

 

THANK YOU!!!

On 7/29/2019 at 7:59 AM, tuanphan said:

@StephenWise1999 Add to Home > Design > Custom CSS

/* Change dropdown menu background */
.header-nav-folder-content {
   background: #febf00 !important;
}

 

 

This worked perfectly for me — thanks @tuanphan! 🙌

I got this from Tuan for this site:
https://harmonica-koala-67z4.squarespace.com/iv-floor-stand-1

I didn’t need transparancy but was able to left justify the text and each drop down box  adjusts it’s size to the size of the nav group it’s under.

In Design>CSS put:
 

/* Change dropdown menu background & link color 🙂 */
.header-nav-folder-content {
     background: hsl(202, 73%, 91%) !important;
      color: #000000 !important;
}
  a {
  color: #000000;
}

/* Expand Dropdown Item */
.header-nav .header-nav-item--folder .header-nav-folder-content {
    width: 120% !important;
}

/* Hover */
.header-nav .header-nav-item--folder .header-nav-folder-content a:hover {
    color:hsl(197, 56%, 43%)!important;
}

/* Background Dropdown */
.header-nav-item.header-nav-item--folder:nth-child(2) .header-nav-folder-content {
    background:hsl(197, 56%, 90%) !important;
}

.header-nav-item.header-nav-item--folder:nth-child(3) .header-nav-folder-content {
    background: hsl(197, 56%, 90%) !important;
}

.header-nav-item.header-nav-item--folder:nth-child(4) .header-nav-folder-content {
    background: hsl(197, 56%, 90%)  !important;
}
.header-nav-item.header-nav-item--folder:nth-child(5) .header-nav-folder-content {
    background:  hsl(197, 56%, 90%)  !important;
}
.header-nav-item.header-nav-item--folder:nth-child(6) .header-nav-folder-content {
    background:hsl(197, 56%, 90%)!important;
    }

.header-nav-folder-item {
    line-height: 2 !important;
}

trying to make the background of my drop down fit the type. advice?

On 12/23/2020 at 11:01 AM, JuliaGreenspan said:

trying to make the background of my drop down fit the type. advice?

Can you share site url? We can help easier

@tuanphan My drop down menu background still does not want to change to light grey I tried these, but they are not working PLEASE HELP ME 

header-nav-folder-content {
   background: #ffffff !important;
  color: #D3D3D3 !important;
  
  a {
  color: #D3D3D3 !important;
}
}
.header-nav-folder-item--active a {
    color: red !important;
}

On 3/3/2021 at 12:50 PM, Netta said:

@tuanphan My drop down menu background still does not want to change to light grey I tried these, but they are not working PLEASE HELP ME 

 

header-nav-folder-content {
   background: #ffffff !important;
  color: #D3D3D3 !important;
  
  a {
  color: #D3D3D3 !important;
}
}
.header-nav-folder-item--active a {
    color: red !important;
}

 

 

Hi. Can you share site url?

www.customsilkscarves.co.za 

On 12/18/2019 at 6:14 AM, kaleidoscope123 said:

Hi, 

Can someone share the code that they use to make the folder drop down transparent? 

Thanks. 

/* Change dropdown menu background */
.header-nav-folder-content {
 background-color:transparent !important;
}

On 3/5/2021 at 10:23 PM, Netta said:

www.customsilkscarves.co.za 

It looks like you solved?

Hi there, what a great thread to find! I have an additional question that I don't think has been answered. 

Is there a way of adding a separation line between each dropdown item and/or increasing the (vertical) space between the items a bit, so it's clear that they are separate items?

Thank you!

On 4/3/2021 at 3:20 PM, lisanemetz said:

Hi there, what a great thread to find! I have an additional question that I don't think has been answered. 

Is there a way of adding a separation line between each dropdown item and/or increasing the (vertical) space between the items a bit, so it's clear that they are separate items?

Thank you!

I think that may be

.header-nav .header-nav-item--folder .header-nav-folder-content .header-nav-folder-item {line-height:0;}

for example in your css

Hi,

can someone please help, my dropdown menu is overlapping!

http://www.agirlaftermyownheart.co.uk

Hi there,

I added code from this thread to change the color of the text on a drop down menu to white (thank you!) but I was wondering if there was a way to change the color of the text of all the menu items when you hover over them.

Thanks!

On 4/6/2021 at 10:16 PM, alihaymes said:

Hi there,

I added code from this thread to change the color of the text on a drop down menu to white (thank you!) but I was wondering if there was a way to change the color of the text of all the menu items when you hover over them.

Thanks!

Hi. Can you share link to your site? We can help easier

On 12/5/2019 at 5:54 AM, tuanphan said:

Yes. You can use custom code to increase dropdown width. Can you share link to your site, i can take a look?

hello @tuanphan, can you help me check on how to make the drop down width be set to auto with the text size? thank you

site: www.camilokoch.com

On 4/13/2021 at 8:28 AM, caig said:

hello @tuanphan, can you help me check on how to make the drop down width be set to auto with the text size? thank you

site: www.camilokoch.com

Hi,

Add to Design > Custom CSS

/* dropdown */
div.header-nav-folder-content {
    width: auto !important;
    min-width: unset !important;
}

On 4/17/2021 at 3:36 AM, tuanphan said:

Hi,

Add to Design > Custom CSS

/* dropdown */
div.header-nav-folder-content {
    width: auto !important;
    min-width: unset !important;
}

 

worked like a charm! thanks @tuanphan

There are different ways to do this with code, but anyone looking for a no-code way, you can do this very simple in Spark Plugin:

Hi! Is there any solution to increasing the leading space between the different dropdown options? And possible add a hover colour?

Thank you!