How to style a dropdown menu?

Hi folks, I'd like to make a change on my site and need your help.

I'd like to modify the dropdown menu and style it as follows: The shape and spacing should resemble what is shown in the attached screenshot. The text (the links) should be left-aligned. The hover effect should remain as it is now. I would also like to be able to change the color of the menu background.

I would greatly appreciate your assistance!

Site: https://maltemartenmethod.squarespace.com/
Pword: maltemartenmethod2023

You can use this CSS code

div.header-nav-folder-content {
    background-color: #f1f !important;
}

div.header-nav-folder-content * {
    text-align: left !important;
}

Thank you @tuanphan, that works so far.

How can I style the background of the menu to look like the screenshot I sent above (Dropdown menu just like here on the Squarespace Forum page)? It should be centered below the navigation menu items with an upward-pointing 'cap' at the top. There should be some more space above the links and between the links in the dropdown menu.

Could you assist me with this again?

@tuanphan, it would be wonderful if you could assist me with this again! 😊

I see you figured arrow. To make it centered under nav menu titles, use this CSS code

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

Thank you @tuanphan, that worked. However, I would still like to style the dropdown menu as shown in the screenshot: a bit more spacing above the header navigation and a bit more space between the items in the menu itself. Additionally, I'd like to have an arrow shape at the top - do I need to upload an image for that, or can it be styled using code? I'm looking forward to your assistance.

Here's how I want it:


Here's how it looks now:

Hey @tuanphan, it would be great if you could help me out with this again! 🙏

Use this CSS code

.header-nav-folder-item {
    margin-bottom: 20px;
}

.header-nav-folder-content:before {
    content: "";
    position: absolute;
    width: 30px;
    height: 30px;
    background-color: #5b767a !important;
    left: 50%;
    top: -10px;
    transform: translateX(-50%) rotate(45deg);
}

.header-nav-folder-content {
    margin-top: 10px;
}

Thank you @tuanphan, that looks pretty good already.

One thing is not working quite right. When moving the cursor from the navigation points like 'Online Courses' down to the dropdown menu, it always disappears, and you can't select the items in the dropdown menu. It only works when moving the cursor over the small downward arrow. I would like the dropdown menu to be less cumbersome to select.

Look forward to further assistance!

Try this CSS under

div.header-nav-item>a {
    height: 40px !important;
    display: flex !important;
    align-items: center;
}

.header-nav-folder-content {
    top: 25px !important;
}

Thanks @tuanphan, you can now move the cursor down without the dropdown menu disappearing, but the code disrupts the spacing, etc. The dropdown menu moves up, and the underline when activating the navigation points appears, moving downward. Unfortunately, I don't like it this way. Is there another way to fix the problem? Looking forward to further assistance!

Site: https://maltemartenmethod.squarespace.com/
Pword: maltemartenmethod2023

@tuanphan it would be great if you could help me with this again! 🙏

On 1/11/2024 at 9:36 AM, tuanphan said:

Try this CSS under

div.header-nav-item>a {
    height: 40px !important;
    display: flex !important;
    align-items: center;
}

.header-nav-folder-content {
    top: 25px !important;
}

 

You can remove the code, I will try testing code again

@tuanphan I deleted the code for now. Do you have another idea on how to solve this differently?

On 1/10/2024 at 8:48 PM, Nomis said:

Thank you @tuanphan, that looks pretty good already.

One thing is not working quite right. When moving the cursor from the navigation points like 'Online Courses' down to the dropdown menu, it always disappears, and you can't select the items in the dropdown menu. It only works when moving the cursor over the small downward arrow. I would like the dropdown menu to be less cumbersome to select.

Look forward to further assistance!

@tuanphan could you take another look at it? Unfortunately, the same issue still persists. I would greatly appreciate your help!

Try this CSS code

@media screen and (min-width: 992px) {
.header-nav-item {
    padding: 20px 0;
}}

On 1/10/2024 at 10:33 AM, tuanphan said:

Use this CSS code

.header-nav-folder-item {
    margin-bottom: 20px;
}

.header-nav-folder-content:before {
    content: "";
    position: absolute;
    width: 30px;
    height: 30px;
    background-color: #5b767a !important;
    left: 50%;
    top: -10px;
    transform: translateX(-50%) rotate(45deg);
}

.header-nav-folder-content {
    margin-top: 10px;
}

Hi @tuanphan I used this code that you provided to add the diamond arrow, but I'm facing an issue where the diamond is stacked on top of my dropdown menu box and thus blocking my texts. Is there a way to arrange it such that is below the background of the dropdown menu box? Below is a screenshot of my issue. Hope that you can assist, thank you so much!