tuanphan Posted September 1, 2020 Share Posted September 1, 2020 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. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Guest Posted October 24, 2020 Share Posted October 24, 2020 (edited) 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 October 24, 2020 by Momo96 Link to comment
tuanphan Posted October 24, 2020 Share Posted October 24, 2020 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. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Guest Posted October 27, 2020 Share Posted October 27, 2020 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 Link to comment
tuanphan Posted October 28, 2020 Share Posted October 28, 2020 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. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Guest Posted October 28, 2020 Share Posted October 28, 2020 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
BrianHHough Posted November 4, 2020 Share Posted November 4, 2020 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! 🙌 tuanphan 1 -- Brian H. Hough Twitter | LinkedIn | Instagram | BrianHHough.com Link to comment
gcart Posted December 1, 2020 Share Posted December 1, 2020 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
JuliaGreenspan Posted December 23, 2020 Share Posted December 23, 2020 trying to make the background of my drop down fit the type. advice? Link to comment
tuanphan Posted December 24, 2020 Share Posted December 24, 2020 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 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Netta Posted March 3, 2021 Share Posted March 3, 2021 @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
tuanphan Posted March 5, 2021 Share Posted March 5, 2021 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? gcart 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
angela Posted March 6, 2021 Share Posted March 6, 2021 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
tuanphan Posted March 12, 2021 Share Posted March 12, 2021 On 3/5/2021 at 10:23 PM, Netta said: www.customsilkscarves.co.za It looks like you solved? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
lisanemetz Posted April 3, 2021 Share Posted April 3, 2021 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
HarKS Posted April 5, 2021 Share Posted April 5, 2021 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 lisanemetz 1 Link to comment
HarKS Posted April 5, 2021 Share Posted April 5, 2021 Hi, can someone please help, my dropdown menu is overlapping! http://www.agirlaftermyownheart.co.uk Link to comment
alihaymes Posted April 6, 2021 Share Posted April 6, 2021 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
tuanphan Posted April 10, 2021 Share Posted April 10, 2021 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. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
caig Posted April 13, 2021 Share Posted April 13, 2021 (edited) 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 April 13, 2021 by caig Link to comment
tuanphan Posted April 17, 2021 Share Posted April 17, 2021 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; } caig and Darya 1 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
caig Posted April 20, 2021 Share Posted April 20, 2021 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 Darya 1 Link to comment
Rasmus_SparkPlugin Posted September 26, 2021 Share Posted September 26, 2021 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: tuanphan 1 - Rasmus Myhrberg, Founder of sparkplugin.com Link to comment
F-RAVN Posted October 4, 2021 Share Posted October 4, 2021 Hi! Is there any solution to increasing the leading space between the different dropdown options? And possible add a hover colour? Thank you! Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment