Dee12 Posted May 17, 2020 Share Posted May 17, 2020 Hello, I was wondering if there was a way to add a down arrow icon to the drop down menu? I've tried multiple css codes but nothing has worked. Any help would be appreciated! Link to comment
paul2009 Posted May 17, 2020 Share Posted May 17, 2020 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: Squarespace Circle Leader since 2017. I value honesty, transparency, diversity and great design ♥.Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™. Content: Links in my posts may refer to SF Digital products or may be affiliate links. Catch up on all the release notes and announcements 2023 [for Circle members only]. There's a public version here too!If I helped, you can thank me by clicking one of the emojis below. If you prefer, you can buy me a coffee.Improve your online store with our extensions. Link to comment
Dee12 Posted May 17, 2020 Author Share Posted May 17, 2020 (edited) Oh okay! @paul2009 My site is https://www.uniquelydolledwigs.com password: unique1234 Edited May 17, 2020 by Dee12 Link to comment
Solution paul2009 Posted May 17, 2020 Solution Share Posted May 17, 2020 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: Let me know how you get on. -Paul fhoreilly, AkankshaK, dnmddy and 2 others 3 2 About: Squarespace Circle Leader since 2017. I value honesty, transparency, diversity and great design ♥.Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™. Content: Links in my posts may refer to SF Digital products or may be affiliate links. Catch up on all the release notes and announcements 2023 [for Circle members only]. There's a public version here too!If I helped, you can thank me by clicking one of the emojis below. If you prefer, you can buy me a coffee.Improve your online store with our extensions. Link to comment
Dee12 Posted May 17, 2020 Author Share Posted May 17, 2020 It worked. Thank you so much! paul2009 1 Link to comment
AkankshaK Posted January 9, 2021 Share Posted January 9, 2021 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: 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
tuanphan Posted January 10, 2021 Share Posted January 10, 2021 @AkankshaK If you share site url, we can check easier 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
AkankshaK Posted January 10, 2021 Share Posted January 10, 2021 9 hours ago, tuanphan said: @AkankshaK If you share site url, we can check easier Hi Tuan, thanks so much. My website is www.purnamayurveda.com. Link to comment
tuanphan Posted January 15, 2021 Share Posted January 15, 2021 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
AkankshaK Posted January 17, 2021 Share Posted January 17, 2021 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
Eileenm41 Posted August 6, 2021 Share Posted August 6, 2021 Hi there, I'm wondering if you would have a CSS code for a dropdown menu arrow for the URL www.tixserve.com Thanks! Link to comment
tuanphan Posted August 7, 2021 Share Posted August 7, 2021 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
sdehaan Posted November 10, 2021 Share Posted November 10, 2021 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! Link to comment
tuanphan Posted November 11, 2021 Share Posted November 11, 2021 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
sdehaan Posted November 11, 2021 Share Posted November 11, 2021 @tuanphan I have inserted that in design, custom CSS but it is still now showing up. Link to comment
tuanphan Posted November 14, 2021 Share Posted November 14, 2021 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
Vincent13 Posted February 8, 2022 Share Posted February 8, 2022 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 Link to comment
tuanphan Posted February 14, 2022 Share Posted February 14, 2022 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
vrlafont Posted May 13, 2022 Share Posted May 13, 2022 Would someone be able to help me do this to my site please? www.foreversuntanz.co.nz Any help would be much appreceiated! Link to comment
tuanphan Posted May 14, 2022 Share Posted May 14, 2022 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
pelanderson Posted January 30 Share Posted January 30 On 5/14/2022 at 9:57 AM, tuanphan said: Use this CSS li.folder-collection.folder>a:after { content: "\e009"; font-family: 'squarespace-ui-font'; position: relative; top: 2px; } Hi there, Code you give code for an arrow at the dropdown for this site please https://renfield-centre.squarespace.com/ PW renfield Thanks, Pete Link to comment
pelanderson Posted January 31 Share Posted January 31 14 hours ago, pelanderson said: Hi there @tuanphan, Could you give code for an arrow at the dropdown for this site please https://renfield-centre.squarespace.com/ PW renfield Thanks, Pete Link to comment
tuanphan Posted February 1 Share Posted February 1 19 hours ago, pelanderson said: Use this CSS code a.Header-nav-folder-title:after { content: "\e009"; font-family: 'squarespace-ui-font'; position: relative; top: 2px; } pelanderson 1 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
Bob_B Posted February 1 Share Posted February 1 I too am looking for code that works on my pages: www.belasphoto.com. I tried each of the scripts (above), but got nada. I am a retired university professor (microbial genetic research), an avid photographer, and the designer of my own webpage, www.belasphoto.com Link to comment
tuanphan Posted February 3 Share Posted February 3 On 2/2/2023 at 4:33 AM, Bob_B said: I too am looking for code that works on my pages: www.belasphoto.com. I tried each of the scripts (above), but got nada. Use this CSS code #topNav .main-nav ul li.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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment