Drop down menu arrow

4 hours ago, tuanphan said:

Use this CSS code

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

 

Yes, that worked. Thank you!

One other ancillary question pertaining to the dropdown menus on my webpages: www.belasphoto.com.

I have multiple dropdown menus. On my "Photographs" dropdown,  hovering over the navigation bar displays the underlying pages clearly, with a gap between the navigation bar label "Photographs" and the underlying pages. However, on all other dropdown menus, when one hovers over the respective navigation label, "Blog" for example, the underlying pages are displayed over the "Blog" header. Same with the others.

I haven't found the cause for this aberrant behavior, and would like to correct it so that all dropdown menus display like the "Photographs" dropdown.

Anyone have any suggestions on what the solution may be?

On 2/1/2023 at 6:31 AM, tuanphan said:

Use this CSS code

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

Brilliant as always, thanks @tuanphan

@tuanphan @paul2009

I'm using the following code (Squarespace 7.1).  It's added the drop down menu arrow, but also changed the  alignment of the folder name in the nav menu.  Any idea's ?

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

4 hours ago, matthewevas said:

It's...changed the alignment of the folder name in the nav menu.

What's the URL of the site?

On 2/25/2023 at 10:55 AM, matthewevas said:

I'm using the following code (Squarespace 7.1).  It's added the drop down menu arrow, but also changed the  alignment of the folder name in the nav menu.  Any idea's ?

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

Use this new code

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

12 hours ago, tuanphan said:

Use this new code

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

 

Hi @tuanphan - Thank you !  The new part of code (align-items:  centre;) helped, but the alignment was still slightly off.  However, it put me on the right track so I tried "align-items:  end;" and also "align-items:  flex-end;".  These both fully correct the alignment issue, but I'm not sure which one is best to use.

I'm trying to add drop down for folder on older 7.0 website is https://www.pacificbreezelandscape.com

6 hours ago, FNAB said:

I'm trying to add drop down for folder on older 7.0 website is https://www.pacificbreezelandscape.com

Add to Design > Custom CSS

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

Hi,

I would need some help adding a dropdown menu arrow. I would also like to align the items in the dropdown menu on the left side. www.wunderfitzig-stressberatung.de

Thanks a bunch!
Jess

 

On 3/20/2023 at 11:45 PM, Jess_Wunderfitzig said:

Hi,

I would need some help adding a dropdown menu arrow. I would also like to align the items in the dropdown menu on the left side. www.wunderfitzig-stressberatung.de

Thanks a bunch!
Jess

 

With your site, add this to Design > Custom CSS

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

I'm looking to replace FR | EN | DE | NL 

language switchers on my header with a simple V arrow menu.  This is a temporary work-around, but still one or other of the options obscures another.  Site is live at https://xn--laflnerie-e2a.com/.

I use Shift template.

Thanks in advance for any suggestions.

On 4/13/2023 at 5:36 PM, Gaby_M said:

I'm looking to replace FR | EN | DE | NL 

language switchers on my header with a simple V arrow menu.  This is a temporary work-around, but still one or other of the options obscures another.  Site is live at https://xn--laflnerie-e2a.com/.

I use Shift template.

Thanks in advance for any suggestions.

Add to Design > Custom CSS

ul.cf>li:last-child .folder-parent>a>span:before {
    content: "\e009";
    font-family: 'squarespace-ui-font';
    font-size: 18px;
}
ul.cf>li:last-child .folder-parent>a>span {
    font-size: 0;
}

Hoping this amazing post is still being monitored! I would love help adding a dropdown menu indicator to https://www.centennialvineyardsrestaurant.com.au/

Thank you 😁

Melanie

On 2/8/2024 at 11:07 AM, Mel_71 said:

Hoping this amazing post is still being monitored! I would love help adding a dropdown menu indicator to https://www.centennialvineyardsrestaurant.com.au/

Thank you 😁

Melanie

You can use this CSS code

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