chymer Posted June 8 Share Posted June 8 Hi! I'm working on a custom drop-down and have most of the styling in place, but needs some help getting this over the finish line. Here's what I'm needing some help with: add a 6px line above the link in the header when a drop-down is enabled. The line should be the same width as the drop-down, but be 6px tall and sitting at the top of the page above the menu link center align text in drop-down add drop-shadow under drop-down menu all links to be #1E1E1E (keep orange and bold effects on hover though) This is what the design should look like: And here's how it currently looks in Squarespace: Here's my current custom CSS: /* CHANGE DROPDOWN STYLES */ .header-nav-folder-content { background: #D1D7DF !important; } .header-nav-folder-title { pointer-events: none; } .header-nav-item--active a { background-image: none !important; color:#1B3760 !important; } .header-nav-folder-content { min-width: 90px !important; } .header-nav-folder-item--active .header-nav-folder-item-content { background-image: none!important; } /* HEADER LINKS */ .header-nav-item a:hover { color:#B87D4B !important; font-weight: bold!important; } .header-nav-item a:active { color:#1B3760 !important; } .header-nav-item a:active { color:#1B3760 !important; background-image: none !important; } Link to comment
tuanphan Posted June 11 Share Posted June 11 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
chymer Posted June 11 Author Share Posted June 11 5 hours ago, tuanphan said: Can you share site url? @tuanphan URL: https://suncoconstruction.squarespace.com/ Password: sc-2024 Link to comment
tuanphan Posted June 12 Share Posted June 12 With center dropdown, you can use this CSS code div.header-nav-folder-content * { text-align: center; } .header-nav-folder-content { left: 50% !important; transform: translateX(-50%) !important; } with line on top, use this CSS code div.header-nav-item>a { height: 100px; justify-content: center; align-items: center; display: flex; } div.header-announcement-bar-wrapper { padding-top: 0px !important; padding-bottom: 0px !important; } .header-nav-item.header-nav-item--folder.header-nav-item--active { border-top: 3px solid #b87d4b !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
chymer Posted June 12 Author Share Posted June 12 (edited) Thansk @tuanphan! The code above worked for the most part, but has also created some new issues: The text links run outside of the dropdown background It would be ideal to have the lines break so in the screenshot below, there would be 4 lines of text instead of 2 The orange line at the top should only appear when hovering The code for the orange line moves the dropdown background below the header. I adjusted the code slightly to fix this, but that did not resolve the issue of the orange line not appearing Revised code for the orange line: /* NAV TOP LINE */ div.header-nav-item>a { height: 60px; justify-content: center; align-items: center; display: flex; } div.header-announcement-bar-wrapper { padding-top: 10px !important; padding-bottom: 10px !important; } .header-nav-item.header-nav-item--folder.header-nav-item--active { border-top: 3px solid #b87d4b !important; } Edited June 12 by chymer Link to comment
tuanphan Posted June 13 Share Posted June 13 The line on top, is for Active Item, not Hover If you want to make it appears on hover, change this to this .header-nav-item.header-nav-item--folder { border-top: 3px solid transparent !important; } .header-nav-item.header-nav-item--folder:hover { border-color: #b87d4b !important; } To fix dropdown width, use this code a.header-nav-folder-title[href="/portfolio-1"]+div { min-width: 200px !important; } to move dropdown up, use this code .header-nav-folder-content { top: 70px !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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment