[Share] Dropdown Menu CSS

Some CSS code to customize Dropdown Menu (7.1 version).

You need to insert code to Website Tools (under Not Linked) > Custom CSS

#1. Change Dropdown Background

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

#2. Change Dropdown Opacity

You can use rgba color to adjust opacity, suppose dropdown background color is #f1f, the code should be.

0.5 is opacity, it is 0 to 1

div.header-nav-folder-content {
    background-color: rgba(255,17,255,0.5) !important;
}

#3. Dropdown Transparent

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

#4. Space between dropdown items

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

#5. Add an arrow to Dropdown Title

a.header-nav-folder-title:after {
    content: "\e009";
    font-family: 'squarespace-ui-font';
    position: relative;
    top: 2px;
}

#6. Dropdown round corners

div.header-nav-folder-content {
    border-radius: 30px;
}

#7. Align center dropdown

div.header-nav-folder-content {
    left: 50% !important;
    transform:translateX(-50%) !important;
}
.header-nav-folder-item {
    text-align: center;
}

#8. Align Left/Right Dropdown items

You can change right to left

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

#9. Change dropdown items background/color on hover

/* dropdown item hover background */
div.header-nav-folder-item:hover {
    background-color: #000 !important;
}
/* dropdown item hover text color */
div.header-nav-folder-item:hover * {
    color: white !important;
}

#10. Add an icon before dropdown item

First, you need to know this

Suppose we need to add icons before Portfolio Custom & Gallery Grid Section items, we will use the CSS code

div.header-nav-item:nth-child(2) div.header-nav-folder-item span:before {
    content: "";
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 30px;
    height: 30px;
    display: inline-block;
}
/* dropdown item 1 */
div.header-nav-item:nth-child(2) div.header-nav-folder-item:nth-child(1) span:before {
    background-image: url(https://cdn.pixabay.com/photo/2023/11/15/15/04/leaves-8390274_1280.jpg);
}
/* dropdown item 2 */
div.header-nav-item:nth-child(2) div.header-nav-folder-item:nth-child(2) span:before {
    background-image: url(https://cdn.pixabay.com/photo/2024/01/08/17/41/chokeberry-8496026_1280.jpg);
}

#11. Align Horizontally Dropdown

div.header-nav-folder-content {
    display: flex;
    align-items: center;
    width: 100vw !important;
    right: unset !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    text-align: center !important;
}
div.header-nav-folder-item {
    margin-left: 10px;
    margin-right: 10px;
}

 

#12. Dropdown 2 - 3 columns

div.header-nav-folder-content {
    column-count: 2;
}

#13. Dropdown Item color

span.header-nav-folder-item-content {
    color: #f1f !important;
}

If you have any problems, you can comment below with your site url.

Edited April 19 by tuanphan
update #13 code

Hi, my url is https://dinosaur-wisteria-tjf7.squarespace.com/

I tried number 7 code but it didnt work

2 hours ago, buzzsites said:

Hi, my url is https://dinosaur-wisteria-tjf7.squarespace.com/

I tried number 7 code but it didnt work

I just tried, it works to me. Or what should it look like?

The menu - About Us, Our services etc should all be aligned in the center of the box. 

Like this

 

 

 

16 hours ago, buzzsites said:

The menu - About Us, Our services etc should all be aligned in the center of the box. 

Like this

 

 

 

Use this new code

div.header-nav-folder-content {
    left: 50% !important;
    transform:translateX(-50%) !important;
}
div.header-nav-folder-content * {
    text-align: center !important;
}

 

Thanks so much, this worked! 

Thanks so much, @tuanphan! Your #3 solution worked for me just great! 

#14. Adding FontAwesome Icon in Dropdown

Suppose you have a Dropdown like this

First, you need to find Dropdown Item url. In my example, we will have

• Item text block: /text-block3
• Item image block: /image-block3
• Item button block: /button-block 3

Next, add this code to Code Injection > Header (or if your plan doesn't support Code Injection, you can add it to Code Block in Site Footer)

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />

Next, use this code to Custom CSS box

div.header-nav-folder-item [href="/text-block3"]:before {
    content: "\f129";
    font-family: "Font Awesome 6 Free";
    font-weight: bold;
    color: #000;
    font-size: 20px;
}
div.header-nav-folder-item [href="/image-block3"]:before {
    content: "\f03e";
    font-family: "Font Awesome 6 Free";
    font-weight: bold;
    color: #000;
    font-size: 20px;
}
div.header-nav-folder-item [href="/button-block3"]:before {
    content: "\f10a";
    font-family: "Font Awesome 6 Free";
    font-weight: bold;
    color: #000;
    font-size: 20px;
}

Result

You can add these icon syntax

To find icon syntax, you can access FontAwesome website, choose an icon > Then see here

 

#15. Dropdown Arrow (Down/Up arrow on hover)

Use this CSS Code

a.header-nav-folder-title:after {
    content: "\e009";
    font-family: 'squarespace-ui-font';
    position: relative;
    top: 2px;
}
a.header-nav-folder-title:hover:after {
    transform: rotate(180deg);
    display: inline-block;
}

Before hover

After hover

#16. Dropdown Active Color

Description: When users are on dropdown item page >> make Dropdown Title active (change color, add underline)

First, you need to find Dropdown Title URL

In my example, we will have

Next, You can edit all dropdown item pages > Add a Code Block > Use this code

<style>
  a.header-nav-folder-title[href="/incomplete"] {
    color: #f1f;
    text-decoration: underline;
}
a[data-folder-id][href="/incomplete"]>div>span:nth-child(2) {
    color: #f1f !important;
    text-decoration: underline !important;
}
</style>

Result

#17. Add scroll bar to Dropdown

If the dropdown has too many items, you can add a scroll bar.

You can follow #16 to find Dropdown Title URL, then use CSS code like this

a.header-nav-folder-title[href="/incomplete"] + div {
    max-height: 300px;
    overflow-y: scroll;
}

Result

#18. Dropdown on Desktop – Remove Dropdown on Mobile

If you use a Dropdown Men on Desktop, like this

and on Mobile, it shows this

You want to remove dropdown and show all items like this without clicking “Menu”

You can use this code to Custom CSS box

@media only screen and (max-width: 991px) {
  .header-menu-nav-folder[data-folder="root"] {
    display: none !important;
  }
  .header-menu-nav-folder-content .header-menu-controls {
    display: none;
  }
  .header-menu-nav-folder:not([data-folder="root"]) {
    transform: unset;
    transition: unset;
  }
}

#19. Dropdown Menu active on Click

When you hover Dropdown Title, it will show Dropdown Item

You want, users need to click Dropdown Title to show item, instead of hovering.

First, you use this code to Custom CSS box

div.header-nav-folder-content {
    display: none;
}

Next, use this code to Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
  $('a.header-nav-folder-title').click(function(event) {
    event.preventDefault();
    var $boxSub = $(this).closest('.header-nav-item--folder').find('.header-nav-folder-content');
    $boxSub.toggle();
  });
});
</script>

#20. Decrease the font size in the drop down menu in mobile view

Use CSS code

div.header-menu-controls ~ div * {
    font-size: 10px;
}

#21. Decrease the size of the drop down menu title

Use CSS code

a[data-folder-id]>div>span:nth-child(2), a.header-nav-folder-title {
    font-size: 10px;
}

#22. Underline dropdown item on hover

Use CSS code

div.header-nav-folder-item:hover a {
  text-decoration: underline;
}

#23. Dropdown Menu Custom Font

Suppose you uploaded custom font & declared @font-face

Next, you can use CSS code like this to Custom CSS box. Replace monospace with font what you want.

nav.header-menu-nav-list *, nav.header-nav-list * {
    font-family: monospace;
}

#24. Dropdown Color on Blog Pages Only

Use CSS code

body[class*="type-blog"] div.header-nav-folder-content {
    background-color: #f1f !important;
}

#25. Dropdown Color on Blog Posts Only

body[class*="type-blog"].view-item div.header-nav-folder-content {
    background-color: #f1f !important;
}

#26. Dropdown Color on Blog List/Category Only

body[class*="type-blog"].view-list div.header-nav-folder-content {
    background-color: #f1f !important;
}

#27. Dropdown Menu Size (Width)

div.header-nav-folder-content {
    min-width: unset !important;
    width: 290px !important;
}

#28. Bold a part of Dropdown Nav Item

Suppose we will need to bold “Image” word

We can use code like this to Website Tools > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $(".header-nav-folder-item-content").html(function(_, html) {
        return html.replace(/(Image)/i, '<strong>$1</strong>');
    });
});
</script>

Result

#29. Two Columns in Dropdown Folder

Use CSS code

div.header-nav-folder-content {
    column-count: 2;
    column-gap: 5px;
}

First of all, thank you! You're doing God's work here. @tuanphan

Secondly, in "#10. Add an icon before dropdown item" how do align the icon to the centre of the text? It's currently aligned to the bottom of the text and, since the icons are slightly larger than the text, it looks a bit odd.

Additionally, the icons are also too close to the text and I'd like a little gap. How can I achieve this?

Thanks for the help

11 hours ago, hmpbs said:

First of all, thank you! You're doing God's work here. @tuanphan

Secondly, in "#10. Add an icon before dropdown item" how do align the icon to the centre of the text? It's currently aligned to the bottom of the text and, since the icons are slightly larger than the text, it looks a bit odd.

Additionally, the icons are also too close to the text and I'd like a little gap. How can I achieve this?

Thanks for the help

Do you have link to site? I can check problem easier

Hi @tuanphan! I solved the issue by creating an invisible frame around the icon (using figma). This allowed me to position the image where I wanted.

Hey again @tuanphan!

I've got another question for you.

How can I make the dropdown box come out from underneath the nav bar?

 

Thanks for the help,

hmpbs

14 hours ago, hmpbs said:

Hey again @tuanphan!

I've got another question for you.

How can I make the dropdown box come out from underneath the nav bar?

 

Thanks for the help,

hmpbs

This case, each header layout/navigation item height will need a different code, do you have site url?

Waw, amazing @tuanphan, thank you 😀 I used 2 of these already.

Now I would like the dropdown menu to align vertically from the left under the start of the word it comes under, in this case it's "Livres".

Right now, it vertically aligns from the right, with the end of the word.

Website: https://www.jeremie-mercier.com/

What should I do to fix this?

Thanks! 🙏

On 11/29/2024 at 5:10 AM, floradouville said:

Waw, amazing @tuanphan, thank you 😀 I used 2 of these already.

Now I would like the dropdown menu to align vertically from the left under the start of the word it comes under, in this case it's "Livres".

Right now, it vertically aligns from the right, with the end of the word.

Website: https://www.jeremie-mercier.com/

What should I do to fix this?

Thanks! 🙏

You can use this CSS code

div.header-nav-folder-content {
    left: -1em !important;
}

 

Woop woop! Thank you!! 😀