Jump to content

[Share] Dropdown Menu CSS

Recommended Posts

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;
}

image.png.2d54b67aea132f609d4afb35762f7870.png

#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;
}

image.png.54604d97339224304f4dc971a8c83df7.png

#3. Dropdown Transparent

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

image.png.90a13321d85d160dfdaef7e9d4b6652c.png

#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;
}

image.png.8909379f64fcfdef54e18a2523296cbd.png

#6. Dropdown round corners

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

image.png.5e31c52995ad77c8e5592469e09763df.png

#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

image.thumb.png.ee887dbe873f66c8b1983e7edac57225.png

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);
}

image.png.2e1210acd7e85af71db6483da1faaab7.png

#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;
}

image.thumb.png.4e1ae7c8506b03787ecd7e61561777aa.png

 

#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 by tuanphan
update #13 code

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 4 weeks later...
  • Replies 5
  • Views 1.8k
  • Created
  • Last Reply

Top Posters In This Topic

16 hours ago, buzzsites said:

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

Like this

 

 

 

Homepage Boxes.png

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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.