Drop down menu arrow

Site URL: https://www.brandingwithshecrai.com

Hello can someone tell me how to add a drop down arrow to the navigation bar for example I would like a drop down arrow next to Social Media Strategy to let users know there is another page in that folder. 

I saw on another post that this is specific to the template. Thanks in advance 

31 minutes ago, Shecrai said:

Site URL: https://www.brandingwithshecrai.com

Hello can someone tell me how to add a drop down arrow to the navigation bar for example I would like a drop down arrow next to Social Media Strategy to let users know there is another page in that folder. 

I saw on another post that this is specific to the template. Thanks in advance 

Is this what you want?

Yes it is

Add to Home > Design > Custom Css

/*Using pseudo element to add arrow down icon*/
.header-nav-list .header-nav-item--folder::after {
  content:'';
  width: 0.8rem;
  height: 0.5rem;
background: url('https://api.iconify.design/fe/arrow-down.svg?color=%238b6662') no-repeat center center / contain;
  position: absolute;
  display: block;
  top:50%;
  right: -11px;
  transform: translateY(-50%)
}
/*pointer cursor when hovering nav*/
.header-nav-item--folder {
  cursor: pointer
}

Support me by pressing 👍 if this useful for you

I am getting an syntax error on line 10 which is where the background: url is

On 10/15/2021 at 12:51 AM, Shecrai said:

I am getting an syntax error on line 10 which is where the background: url is

 

Add this to Design > Custom CSS

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

Can someone please help me with this?! I'm getting desperate and keep ruining my site by playing with the CSS when I've never done this particular thing before.

My business site is foreversuntanz.co.nz

Thank you!

20 hours ago, vrlafont said:

Can someone please help me with this?! I'm getting desperate and keep ruining my site by playing with the CSS when I've never done this particular thing before.

 

My business site is foreversuntanz.co.nz

 

Thank you!

Add this to Design > Custom CSS

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

Dear whoever is reading this and needs help,

I edited the code above just doing some googling on CSS syntax and got this to work on my site. Hope this helps someone or gives you a starting point! Don't forget to edit the width, height, and top/right position to get it just right.

/*Using pseudo element to add arrow down icon*/
.header-nav-list .header-nav-item--folder::after {
  content:'';
  width: 0.8rem;
  height: 0.5rem;
  background: url('https://api.iconify.design/fe/arrow-down.svg?color=%238b6662');
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  display: block;
  top:50%;
  right: -11px;
  transform: translateY(-50%)
}
/*pointer cursor when hovering nav*/
.header-nav-item--folder {
  cursor: pointer
}

@ryanhamel Quick question for you. How can I modify the font for the drop down menu with the code above? I would like to add the arrow and also modify the font to get a different font from the menu. Thank's!

On 1/13/2023 at 6:40 PM, sophie-a said:

@ryanhamel Quick question for you. How can I modify the font for the drop down menu with the code above? I would like to add the arrow and also modify the font to get a different font from the menu. Thank's!

You can use these CSS code to achieve your request