Problems With Mobile Overlay (and desktop) Navigation

Site URL: https://tgtfresh.com/

1. My site is in Mandarin, and I've kept everything in the navigation to four characters, so they'd sit flush, however, one of the is a folder, and sticks out like a sore thumb because of the arrow. Is there a way to make it in line with the others, while keeping the arrow? (so people know it's a folder)

2. The navigation folder on mobile, for some reason, is lower. Is there a way to move it up?

3. On desktop, is there a way to add an arrow (like on mobile) to the side or bottom of the folder? Also, is there a way to make the menu more narrow? (as close to the four characters as possible)

Thanks!

3 hours ago, tuanphan said:

#1. Add to Custom CSS

a[data-folder-id] {
    position: relative;
    right: -10px;
}

#2. Add to Custom CSS

[data-folder] .header-menu-nav-folder-content {
    justify-content: flex-start;
}

#3. Use this CSS

a.header-nav-folder-title:after {
    content: "\e009";
    font-family: 'squarespace-ui-font';
}
/* Dropdown auto width */
.header-nav-folder-content {
    width: auto !important;
    min-width: unset !important;
}

 

Thank you so much for this! I've just got a couple of questions - for 2, is it possible to only move the position for the folder? And for 3, is it possible to move it up a bit in line with the other navigation links?

2.

3.

On 9/25/2021 at 11:31 AM, L1NST3R said:

Thank you so much for this! I've just got a couple of questions - for 2, is it possible to only move the position for the folder? And for 3, is it possible to move it up a bit in line with the other navigation links?

2.

 

3.

 

#2. The code doesn't work or???

#3. Use this new code. You can adjust -2px value

a.header-nav-folder-title:after {
    content: "\e009";
    font-family: 'squarespace-ui-font';
    position: relative;
    top: -2px;
}
/* Dropdown auto width */
.header-nav-folder-content {
    width: auto !important;
    min-width: unset !important;
}

2 hours ago, tuanphan said:

#2. The code doesn't work or???

#3. Use this new code. You can adjust -2px value

a.header-nav-folder-title:after {
    content: "\e009";
    font-family: 'squarespace-ui-font';
    position: relative;
    top: -2px;
}
/* Dropdown auto width */
.header-nav-folder-content {
    width: auto !important;
    min-width: unset !important;
}

 

Thanks for the response! For 2, the code works, but the menu (outside of the folder) is now too far up, not centered. Is there a way to only change the alignment of the folder content menu, and not the whole menu?

For 3, the code only changed the position of the arrow, and the link text is still not aligned. 

On 9/27/2021 at 12:19 PM, L1NST3R said:

Thanks for the response! For 2, the code works, but the menu (outside of the folder) is now too far up, not centered. Is there a way to only change the alignment of the folder content menu, and not the whole menu?

For 3, the code only changed the position of the arrow, and the link text is still not aligned. 

#3. Can you explain in more detail? I thought you want to move arrow up?

On 9/28/2021 at 6:15 PM, tuanphan said:

#3. Can you explain in more detail? I thought you want to move arrow up?

Hi, sorry for the late response, and being vague, the position of the arrow was fine, but the name of the menu itself is no longer aligned with other navigation links.

On 10/1/2021 at 3:08 PM, L1NST3R said:

Hi, sorry for the late response, and being vague, the position of the arrow was fine, but the name of the menu itself is no longer aligned with other navigation links.

Try this new code

a.header-nav-folder-title {
    position: relative;
    top: -1px;
}
a.header-nav-folder-title:after {
    content: "\e009";
    font-family: 'squarespace-ui-font';
    position: relative;
    top: -2px;
}
/* Dropdown auto width */
.header-nav-folder-content {
    width: auto !important;
    min-width: unset !important;
}

On 10/3/2021 at 9:33 PM, tuanphan said:

Try this new code

a.header-nav-folder-title {
    position: relative;
    top: -1px;
}
a.header-nav-folder-title:after {
    content: "\e009";
    font-family: 'squarespace-ui-font';
    position: relative;
    top: -2px;
}
/* Dropdown auto width */
.header-nav-folder-content {
    width: auto !important;
    min-width: unset !important;
}

 

Sorry for the late response, been a bit busy lately. The code hasn't worked, and if I'd want the symbol to be there it would still be unaligned. It's okay if it can't be changed, you've helped with the most important issues already, thanks!