northtahoepaddle Posted March 2, 2021 Share Posted March 2, 2021 Site URL: https://hen-rust-2rf6.squarespace.com/ Hello, I'm hoping someone here may be able to help me figure out the custom CSS that I need to change the issue I'm having with my current site design. I have a folder in my header navigation titled "Reservations" that when hovered over, the drop down menu is approximately twice as wide as the page titles that drop down below the folder. I'll attach a screenshot for reference. In a perfect world, I'd like the drop down to only be as wide as the widest title of the page within the folder with a small amount of padding on either side, centered horizontally under the folder title, and the each word, including the folder title "Reservations" to be spaced equally vertically. I also may ultimately end up wanting the background color of the drop down menu to just be transparent, as that may end up being the most aesthetically pleasing look. I've poked around the forums a bit, and tried embedding some of the various custom CSS that I've found, yet none of it has seemed to do what I was hoping. If anyone has any idea what the best way to approach this would be, any help would be greatly appreciated. Here is the site info, not sure if this helps or not... https://hen-rust-2rf6.squarespace.com/ password: guest Squarespace 7.1, Colima template Thanks! Link to comment
AndreaDube Posted March 3, 2021 Share Posted March 3, 2021 Try: .header-nav .header-nav-item--folder .header-nav-folder-content { min-width: auto; } madcapcreative 1 Link to comment
northtahoepaddle Posted March 3, 2021 Author Share Posted March 3, 2021 1 hour ago, AndreaDube said: Try: .header-nav .header-nav-item--folder .header-nav-folder-content { min-width: auto; } Thank you!! This is exactly what I was looking for, I just couldn't seem to find the exact CSS I needed for this. Thank you, thank you, thank you. Do you perhaps have any recommendation for the vertical spacing I mentioned in my original question or making the background of the drop down menu transparent? I'll start poking around on my own a bit, as I'm guessing there are plenty of resources on this, but if you have any ideas, please let me know! Thanks again, I really appreciate your help. Sam Link to comment
AndreaDube Posted March 3, 2021 Share Posted March 3, 2021 Looks like you figured it out? Link to comment
fleurdelis Posted June 11, 2021 Share Posted June 11, 2021 On 3/2/2021 at 6:25 PM, AndreaDube said: Try: .header-nav .header-nav-item--folder .header-nav-folder-content { min-width: auto; } THANK YOU SO MUCH. I've scoured these forums for a code that works, and yours is the only one that has! I genuinely tried at least 15 and was starting to lose faith. Thanks again! AndreaDube and madcapcreative 2 Link to comment
JParker1570048365 Posted November 21, 2023 Share Posted November 21, 2023 Hi guys, I had the same problem and this also works for me, thank you!! Do you know how to make it work for the Language drop down menu too? 🙂 https://silver-star-fphr.squarespace.com password: jimparker Link to comment
tuanphan Posted November 24, 2023 Share Posted November 24, 2023 On 11/21/2023 at 5:27 PM, JParker1570048365 said: Hi guys, I had the same problem and this also works for me, thank you!! Do you know how to make it work for the Language drop down menu too? 🙂 https://silver-star-fphr.squarespace.com password: jimparker Use this CSS code /* align language dropdown */ .language-picker-content * { text-align: right !important; align-items: flex-end !important; justify-content: flex-end !important; } JParker1570048365 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
addisonpann Posted December 4, 2023 Share Posted December 4, 2023 On 11/23/2023 at 7:14 PM, tuanphan said: Use this CSS code I would like the nav dropdown menu to be the width of the title of the folder title (Case Studies), not the folder contents, with a bit of padding on either side. Any idea how I would do that? Site URL: http://addisonpann.com Link to comment
tuanphan Posted December 6, 2023 Share Posted December 6, 2023 On 12/5/2023 at 1:16 AM, addisonpann said: I would like the nav dropdown menu to be the width of the title of the folder title (Case Studies), not the folder contents, with a bit of padding on either side. Any idea how I would do that? Site URL: http://addisonpann.com Like this? Use this CSS code (I removed red from the code) /* Dropdown auto width */ .header-nav-folder-content { padding-left: 10px !important; padding-right: 0 !important; left: 0 !important; right: 0 !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
ellen_b Posted August 15 Share Posted August 15 (edited) @tuanphan Hi! I have a related issue that I'm hoping you might be able to help out with. As I hover over the items in my nav folder, when I reach a longer one, the right edge of the folder itself bumps out. I'm guessing this is the "auto width" feature. I'd actually prefer to make the folder wider but static, so the folder size doesn't jump around. I've tried adding padding to the right side, but the jumping around still happens. Maybe there is some way to disable the auto-width? I have this CSS in right now from trying to manually adjust the padding: .header-nav .header-nav-item--folder .header-nav-folder-content { padding-left: 30px; padding-right: 30px; padding-top: 25px; padding-bottom: 25px; } Here is the site with password. Password = "backandforth" Thank you! Edited August 15 by ellen_b Link to comment
Lesum Posted August 16 Share Posted August 16 (edited) @ellen_b Hi! To address the issue, first remove the existing block of custom code you added. .header-nav-item a:hover { background: #e0c9d9; padding-left: 12px; } Then, add the following code to the Custom CSS panel: .header-nav-folder-content .header-nav-folder-item { position: relative; } .header-nav-folder-content a { display: block; width: 100%; position: relative; } .header-nav-folder-content a::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: transparent; z-index: -1; } .header-nav-folder-content a:hover::before { background-color: #e0c9d9; left: -12px; } .header-nav-folder-item:hover a { transform:translateX(12px); } Edited August 21 by Lesum Updated Code tuanphan 1 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
ellen_b Posted August 21 Share Posted August 21 (edited) @Lesum Hi! Sorry, I'm just seeing now that you replied to this! (Thank you!) I deleted the code you suggested and added the new code. The width of the drowndown is now fixed as I hover over different items, which is great, but the item background extends over the edge of the folder (see screenshot). I'd like there to be some white margin on either side of the purple background. Edited August 21 by ellen_b Link to comment
Lesum Posted August 21 Share Posted August 21 @ellen_b Hi! I just updated the previous code. Please try adding the new code. Thanks! 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
ellen_b Posted August 21 Share Posted August 21 @Lesum Hmm replaced the code, but it's still not quite right. 🤔 Link to comment
Lesum Posted August 21 Share Posted August 21 @ellen_b It’s still showing the old code on my end. From this block of code .header-nav-folder-content a:hover::before { background-color: #e0c9d9; left: -12px; width: calc(112%); } you just need to remove the last line: width: calc(112%); 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
ellen_b Posted August 21 Share Posted August 21 @Lesum Ahh got it. Thank you!! I have one tiny detail. Can we make the padding on the right side of the background color the same width as the right? See red markings in my screenshot. Link to comment
Lesum Posted August 21 Share Posted August 21 @ellen_b Here's the updated code: .header-nav-folder-content .header-nav-folder-item { position: relative; } .header-nav-folder-content a { display: block; width: 100%; position: relative; } .header-nav-folder-content a::before { content: ''; position: absolute; top: 0; left: 0px; right: 0; bottom: 0; background-color: transparent; z-index: -1; } .header-nav-folder-content a:hover::before { background-color: #e0c9d9; left: -12px; } .header-nav-folder-item:hover a { transform: translatex(6px); } ellen_b 1 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment