Buy me a coffee

Dropdown Menu CSS

#1. Change Dropdown Background

#2. Change Dropdown Opacity

#3. Dropdown Transparent

#4. Space between dropdown items

#5. Add an arrow to Dropdown Title

#6. Dropdown round corners

#7. Align center dropdown

#8. Align Left/Right Dropdown items

#9. Change dropdown items background/color on hover

#10. Add an icon before dropdown item

#11. Align Horizontally Dropdown

#12. Dropdown 2 – 3 columns

#13. Dropdown Item color

#14. Adding FontAwesome Icon in Dropdown

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

#16. Dropdown Active Color

#17. Add scroll bar to Dropdown

#18. Dropdown on Desktop – Remove Dropdown on Mobile

#19. Dropdown Menu active on Click

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

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

#22. Underline dropdown item on hover

#23. Dropdown Menu Custom Font

#24. Dropdown Color on Blog Pages Only

#25. Dropdown Color on Blog Posts Only

#26. Dropdown Color on Blog List/Category Only

#27. Dropdown Menu Size (Width)

#28. Bold a part of Dropdown Nav Item

#29. Two Columns in Dropdown Folder

#30. Change dropdown title color on hover

#31. Change dropdown item color on hover

#32. Add border on left of dropdown item on hover

#33. Move dropdown item to right on hover

#34. Add a custom text under Dropdown

#35. Add custom text under dropdown item

#36. Remove underline on Dropdown main item

#37. Change Dropdown Arrow Plus to Minus on hover

#38. Underline Dropdown links on hover

#39. Change Dropdown item font smaller

#40. Add a border around Dropdown item

#41. Set max width for specific dropdown menu

#42. Change dropdown to fullwidth background

#43. Multi color on dropdown item

#44. Create horizontal dropdown menu

#45. Reduce space between items in mobile dropdown

#46. Change dropdown menu background color on scroll

#47. Change dropdown menu text color on scroll

#48. Add unclickable text to top of dropdown menu

#49. Change dropdown item background on hover

#50. Hover Dropdown Item – Show colored background, left

#51. Replace Dropdown Title with Custom Image

#52. Make dropdown always visible

#53. Make text in dropdown menu smaller

#54. Hover dropdown – push down page content

#55. Hover dropdown – show diagonal arrow

#56. Change color of Dropdown Folder text only

#57. Change color of Dropdown Folder text only (One Page)

#58. Change color of Specific Dropdown text color on All pages

#59. Change color of specific dropdown text color on All pages

#60. Remove dropdown background on one page

#61. Change dropdown background color on One Page

#62. Hide Dropdown Folder on One Page

#63. Additional text to Dropdown items

#64. Dropdown title clickable

#65. Align left dropdown items – title

#66. Space between folder items

#67. Add a line between navigation dropdown items

#68. Dropdown in Dropdown (Multi level dropdown)

#69. Change dropdown width

#70. 2 columns dropdown

#71. Dropdown Menu with 2 or 3 Columns, Image above Text

#72. Change opacity of dropdown background

#73. Add an image under dropdown menu item

#74. Change order of Dropdown Menu links on One Page

#75. Adding FontAwesome icon to Dropdown Item

#76. Dropdown Menu 2 Columns and change order menu items

#77. Adding FontAwesome icon to Dropdown Title

#78. Line divider between Dropdown Menu links

#79. Dropdown navigation link bold when it is active

#80. Linking Dropdown Links to different sections on a specific page

#81. Underline Dropdown Link item when it is active/selected

#82. Make a Dropdown Link bold

#83. Add a label after Dropdown links

#84. Align center dropdown items on One Page

#85. Remove underline on Dropdown main item

#86. Change Dropdown Menu text color on hover

#87. Change Dropdown Arrow Plus to Minus on hover

#88. Change Dropdown Arrow

#89. Add a border around Dropdown item

#90. Underline Dropdown links on hover

#91. Set max width for specific dropdown menu

#92. Change Dropdown item font smaller

#93. Change dropdown to fullwidth background

#94. Add down/up arrow to Dropdown

#95. Multi color on dropdown item

#96. Create horizontal dropdown menu

To change background color of horizontal dropdown, use extra code

#97. Reduce space between items in mobile dropdown

#98. Change dropdown menu background color on scroll

#99. Change dropdown item background on hover

#100. Hover Dropdown Item – Show colored background, left border and move item to right

#101. Replace Dropdown Title with Custom Image

#102. Make dropdown always visible

#103. Make text in dropdown menu smaller

#104. Hover dropdown – push down page content

#105. Change Dropdown Menu to Burger on Desktop

span.header-nav-folder-title-text {
    font-size: 0;
    background-image: none !important;
}
span.header-nav-folder-title-text:after {
    content: "\e030";
    font-family: 'squarespace-ui-font';
    font-size: 30px !important;
    position: relative;
    top: 5px;
}

#106. Dropdown arrow smooth move on hover

/* Dropdown arrow */
.header-nav-item--folder:hover .header-dropdown-flip svg, .header-dropdown-flip svg {
  transition: ease 0.25s all !important;
}