Dropdown Menu CSS

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

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 #2 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

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

(chèn ảnh)

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

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