Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Dropdown Menu colour Squarespace 7.1


Go to solution Solved by tuanphan,

Recommended Posts

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?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 month later...

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.

Edited by Momo96
Link to comment

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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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!!!

Link to comment
  • 4 weeks later...

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;
}

Link to comment
  • 3 weeks later...
On 12/23/2020 at 11:01 AM, JuliaGreenspan said:

trying to make the background of my drop down fit the type. advice?1748191257_ScreenShot2020-12-22at11_00_43PM.thumb.png.f6713cf04a5cfad129751b3eb51f832c.png

Can you share site url? We can help easier

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 months later...

@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;
}

 

 

Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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;
}

Link to comment
  • 4 weeks later...

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!

Link to comment
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

Link to comment

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!

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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

Edited by caig
Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 5 months later...
  • 2 weeks later...

Create an account or sign in to comment

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

×
×
  • Create New...