Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Drop down menu arrow


Go to solution Solved by paul2009,

Recommended Posts

This is usually straightforward, but it is specific to the template and site settings. It will really help us if you include a working link to the site. If your site isn't live yet, please set a site password and tell us what it is.
 

About Paul: Circle Community Leader who values honesty, transparency, respect and appreciation ♥.
Work: Squarespace Expert and founder of 
SF Digital, a company dedicated to improving Squarespace websites by building the features Squarespace didn't include™. See our range of extensions for Squarespace to improve your store.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Link to comment
  • Solution

Try adding this to Settings > Advanced > Code Injection > Header:

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">

And add this to Design > Custom CSS:

.header-nav-item.header-nav-item--folder a.header-nav-folder-title:after {
  font-family: FontAwesome;
  content: "\f107";
  padding-left: 4px;
}

You should see this:

wigs-navigation-dropdown.png.317d6d693e917a6822b8ced536a82175.png

 

Let me know how you get on.

-Paul

About Paul: Circle Community Leader who values honesty, transparency, respect and appreciation ♥.
Work: Squarespace Expert and founder of 
SF Digital, a company dedicated to improving Squarespace websites by building the features Squarespace didn't include™. See our range of extensions for Squarespace to improve your store.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Link to comment
  • 7 months later...
On 5/17/2020 at 12:17 PM, paul2009 said:

Try adding this to Settings > Advanced > Code Injection > Header:


<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">

And add this to Design > Custom CSS:


.header-nav-item.header-nav-item--folder a.header-nav-folder-title:after {
  font-family: FontAwesome;
  content: "\f107";
  padding-left: 4px;
}

You should see this:

wigs-navigation-dropdown.png.317d6d693e917a6822b8ced536a82175.png

 

Let me know how you get on.

-Paul

Hi Paul, this is fantastic, thank you. Would you be able to help with opening the sub menu when the down arrow is clicked as oppposed to it opening on hover? Thanks! Akanksha 

Link to comment
On 1/10/2021 at 6:01 PM, AkankshaK said:

Hi Tuan, thanks so much. My website is www.purnamayurveda.com. 

Hi. This will require script code. Do you use Personal or Business Plan?

Also, you want dropdown menu show on click, on both click + hover arrow?

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 1/15/2021 at 10:35 PM, tuanphan said:

Hi. This will require script code. Do you use Personal or Business Plan?

Also, you want dropdown menu show on click, on both click + hover arrow?

Hi Tuan, thanks for looking into this. 

I have a business plan. 

I would like the dropdown menu to show on click+ hover please if possible 🙏

Link to comment
  • 6 months later...
On 8/6/2021 at 9:28 PM, Eileenm41 said:

Hi there, I'm wondering if you would have a CSS code for a dropdown menu arrow for the URL www.tixserve.com

Thanks!

Hi. I see an arrow here. Do you still need help?

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 3 months later...
9 hours ago, sdehaan said:

I am looking as well for this drop down menu arrow -- site: https://www.reachoutandreadmi.org/

I have the codes correctly inserted that you used back in 2020, but I'm wondering if 7.1 needs something different, thanks! 

Add to Design > Custom CSS

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

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 11/12/2021 at 3:11 AM, sdehaan said:

@tuanphan I have inserted that in design, custom CSS but it is still now showing up. 

You mean show arrow or remove arrow??

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 months later...
On 2/8/2022 at 3:16 PM, Vincent13 said:

Hi Team,

I applied the solution from April 2020 but it still does not show the arrow on my dropdown menu: https://code.cubewise.com/

Would you be able to help me to show the down arrow when there is dropdown?

Cheers,

Vincent

Add this to Design > Custom CSS

/* dropdown arrow */
.folder-toggle:after {
    content: "\e009";
    font-family: 'squarespace-ui-font';
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 months later...
20 hours ago, vrlafont said:

Would someone be able to help me do this to my site please? 

 

www.foreversuntanz.co.nz

 

Any help would be much appreceiated!

Use this CSS

li.folder-collection.folder>a:after {
    content: "\e009";
    font-family: 'squarespace-ui-font';
    position: relative;
    top: 2px;
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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...