# How to customize color and font of Dropdown Menu

**URL:** <https://community.elfsight.com/t/how-to-customize-color-and-font-of-dropdown-menu/84995>\
**Category:** Platform Tips\
**Tags:** squarespace\
**Created:** [November 25, 2024, 3:03am UTC](https://community.elfsight.com/t/how-to-customize-color-and-font-of-dropdown-menu/84995 "2024-11-25T03:03:38Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![tuanphan](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/tuanphan/32/3165_2.png) [@tuanphan](https://community.elfsight.com/u/tuanphan)\
**Post date:** [November 25, 2024, 3:03am UTC](https://community.elfsight.com/t/how-to-customize-color-and-font-of-dropdown-menu/84995/1 "2024-11-25T03:03:38Z")

</div>

To customize color and font of Dropdown Menu, you can follow these.

**#1.** With Color  
To change Dropdown Menu background color, you can use this CSS code

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

```

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/4/d/4d61b330bc57b38c9e6fa54546214c3bcf4ba6fd.jpeg)

To change Dropdown Item color, you can use this CSS code

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

```

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/9/c/9ccea5ceeb1431c2be6fbcdf0ee04b141f2366b5.jpeg)

To change Dropdown Title Color, use this CSS code

```auto
a.header-nav-folder-title {
    color: gold !important;
}

```

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/f/7/f756a9cc52d255810406ef725cebfdcffc65b9ca.png)

To change Dropdown item color on hover, use this CSS code

```auto
div.header-nav-folder-content div:hover a {
    color: #f1f !important;
}

```

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/9/e/9e86db65d9ce165f3269c3666b7b612362d31ccc.png)

To change Dropdown item background on hover, use this CSS code

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

```

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/1/8/184abf1adcbc4f48f5ba9f83d07ce53f9b520c21.png)

**#2.** With Font  
To change Dropdown title font, use this CSS code. Replace monospace with font name what you want

```auto
a.header-nav-folder-title {
    font-family: monospace;
}

```

To change Dropdown Items font, use this CSS code

```auto
div.header-nav-folder-content a {
   font-family: monospace;
}

```

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/9/1/918a0599790521dd6c33bcf5a9b59995d60f834f.jpeg)