Customize Dropdown Navigation Menu

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

Hi! I want to add an image (custommade in Adobe Illustrator) to each page link on my navigation menu. How do I do that?

Can someone help me with this?

Hi. Can you provide access password?

Hi @tuanphan! the access password is: home

17 hours ago, SolveigTraeet said:

Hi @tuanphan! the access password is: home

Discover..item or discover + both dropdown items?

@tuanphan Can you help me?

What my dropdown menu looks like now:

After: What I want the dropdown menu to look like: bigger and centered, with my brand icons/titles.

Add to Design > Custom CSS

/* Folder menu */
.header-nav-folder-content {
    left: 50% !important;
    transform: translateX(-50%);
    width: 350px !important;
}
.header-nav-folder-item [href="/about"]:before {
    content: "";
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/08/montauk-squarespace.jpg);
    background-size: contain;
    display: inline-block;
    background-position: left center;
    width: 20px;
    height: 20px;
    margin-right: 5px;
}

Repeat & change /about to other urls.

@tuanphan Thank you so much!

@tuanphan Can you help me further?

1. How do I place custom icons, with links to websites, at the bottom of my menu centered (like on the attached picture above)?

2. How to make the pagelinks custommade images (like you see on picture above)?

3. How to make the icons next to pagelinks bigger (if I make the pixel bigger in the code you gave me, the image just multiplies, instead of getting bigger)?

On 1/13/2021 at 7:38 PM, SolveigTraeet said:

@tuanphan Can you help me further?

1. How do I place custom icons, with links to websites, at the bottom of my menu centered (like on the attached picture above)?

2. How to make the pagelinks custommade images (like you see on picture above)?

3. How to make the icons next to pagelinks bigger (if I make the pixel bigger in the code you gave me, the image just multiplies, instead of getting bigger)?

 

1. 2. Answered in other post

3. Try new code

/* Folder menu */
.header-nav-folder-content {
    left: 50% !important;
    transform: translateX(-50%);
    width: 350px !important;
}
.header-nav-folder-item [href="/about"]:before {
    content: "";
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/08/montauk-squarespace.jpg);
    background-size: contain;
    display: inline-block;
    background-position: left center;
	background-repeat: no-repeat;
    width: 20px;
    height: 20px;
    margin-right: 5px;
}

@tuanphan That did the trick, thank you!

But can you help me further?

If you see attached picture, The pagelinks and the icons next to them are all over the place. Can you help me make the icons and pagelinks closer to each other?

- Move icons more to left

- Move pagelinks more to left, and upwards to the center of the icons (see picture attached at bottom)

This is what I want it to look, can you help me?:

14 hours ago, SolveigTraeet said:

@tuanphan That did the trick, thank you!

But can you help me further?

If you see attached picture, The pagelinks and the icons next to them are all over the place. Can you help me make the icons and pagelinks closer to each other?

- Move icons more to left

- Move pagelinks more to left, and upwards to the center of the icons (see picture attached at bottom)

 

 

This is what I want it to look, can you help me?:

Remove space withing image.

@tuanphan Thank you for replying, but I don't understand how I remove space within images. 

On 1/18/2021 at 5:49 PM, SolveigTraeet said:

@tuanphan Thank you for replying, but I don't understand how I remove space within images. 

Edit images with AI, Photoshop, before uploading to your site.

For those on macOS if you just need to do simple image manipulations cropping, resizing etc. You can use Apple's Preview application. It comes with the OS. 🙂