Changing Header Navigation Folder Drop Down Menu Width and Styling?

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!

Try: 

.header-nav .header-nav-item--folder .header-nav-folder-content {
    min-width: auto;
}

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 

Looks like you figured it out? 

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!

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

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

Thank you!

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

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