Replace Page-link titles, With Custom made ''Text-Images'' in Dropdown Folder

Site URL: https://caper-badger-3s6d.squarespace.com/about

Password: home

I want to replace the ''garamond'' page-link titles, with my custommade ''text-images'' from Adobe illustrator (see picture attached). I want my custom made ''text-images'' to be my page-link titles.

Can anyone help me?

I don't see Garamon item?

On 1/20/2021 at 3:25 PM, tuanphan said:

I don't see Garamon item?

@tuanphan I meant the pagelinks in folder. Can you help me replace the pagelinks in folder menu, with my own custom ''text-images''?

Site URL: https://caper-badger-3s6d.squarespace.com/about

Password: home

@tuanphan Do you have time to help me with the code, for how I can replace the pagelinks in folder nav, with my own ''text-images''?

On 1/28/2021 at 7:28 AM, SolveigTraeet said:

@tuanphan Do you have time to help me with the code, for how I can replace the pagelinks in folder nav, with my own ''text-images''?

Hi. Sorry for the delay. I was off some day.

Do you still need help on this?

On 2/1/2021 at 3:34 AM, tuanphan said:

Hi. Sorry for the delay. I was off some day.

Do you still need help on this?

Yes, I still need help. Can you help me replace the pagelinks in Dropdown Folder, with my own custom ''text-images''?

Site URL: https://caper-badger-3s6d.squarespace.com/about

Password: home

I see custom image here. It looks like you solved?

23 hours ago, tuanphan said:

I see custom image here. It looks like you solved?

@tuanphan No, I didn't solve it. I want to replace the page-link titles, not the nav icons (stars) next to page-link titles. Can you help me replace the page-link titles with my own custom text-images?

Visual Picture of what I want: Replace page-link titles

What it looks like now:                                         What I want it to look:

@tuanphan Can you help me with this today?

Add to Design > Custom CSS. Repeat for other items

.header-nav-folder-item [href="/about"] {
    background-image: url(https://cdn.pixabay.com/photo/2020/12/18/15/29/mountains-5842346__340.jpg) !important;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    color: transparent !important;
    margin-bottom: 20px;
}

.header-nav-folder-item [href="/music"] {
    background-image: url(https://cdn.pixabay.com/photo/2020/03/24/05/08/horse-4962780__340.jpg) !important;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    color: transparent !important;
	margin-bottom: 20px;
}

@tuanphan Thank you, but can you help me with the size adjustment? It looks like this now:

I want it to look like this:

Try this new code.

.header-nav-folder-item [href="/about"] {
    background-image: url(https://static1.squarespace.com/static/5feeff4078965c3d27c09d49/t/601d11477075187094652c94/1612517703227/pagelink1.png) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    color: transparent !important;
    margin-bottom: 5px;
}

(I added !important)

@tuanphan Thank you!