Custom sub menu

Site URL: https://octagon-triceratops-czm6.squarespace.com/

Hello,

Can anyone help me? The dropdown of my menu isn't looking good, so I would like to customize it to the example I have attached. The first pic is what it looks like as of now, the second picture is how I would like it to display (centered). I also want the dropdown background to be less wide, its too long as of now for my titles and I dont wan't it under the other titles 

Password for the site: OH2022

Thanks!

Add to Design > Custom CSS

/* Dropdown auto width */
.header-nav-folder-content {
    width: auto !important;
    min-width: unset !important;
}

hello,

Could the dropdown texts be aligned center as well as the dropdown background? As of now, the main title "How it Works" is aligned center, but the 3 dropdown titles and the background are aligned right. thanks! 

Also, is there a way to make the footer more responsive so that this doesn't happen when I narrow the page?When I narrow the page, unless I do an approximate size of "mobile" or "tablet" it breaks the words on the footer and images 

And here is another image if I narrow the page enough to simulate mobile, where it does look good 

Is there a way to keep it responsive at all times? thank you!

#1. Try this new code

.header-nav-folder-content {
    width: auto !important;
    min-width: unset !important;
    left: 50% !important;
    transform: translateX(-50%);
}

#2. Try this code

div#block-ca4695f04464f0f04baa * {
    white-space: nowrap !important;
}

Hello,

the background of the dropdown isnt working (its showing the background cut), is there a way to maybe either fix that or remove the background colour? I think removing background colour might be easier, or if I can get a code for: fixing the dropdown background and 1 code for: removing the dropdown code, to see if any works? thank you and sorry for asking so many questions
 

16 hours ago, rio9 said:

Hello,

the background of the dropdown isnt working (its showing the background cut), is there a way to maybe either fix that or remove the background colour? I think removing background colour might be easier, or if I can get a code for: fixing the dropdown background and 1 code for: removing the dropdown code, to see if any works? thank you and sorry for asking so many questions
 

Use this new code

.header-nav-folder-content {
    left: 50% !important;
    transform: translatex(-50%);
    width: auto !important;
    min-width: 100px !important;
    background-color: Transparent !important;
}