Jump to content

Customize Dropdown Navigation Menu

Recommended Posts

17 hours ago, SolveigTraeet said:

Hi @tuanphan! the access password is: home

Discover..item or discover + both dropdown items?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • SolveigTraeet changed the title to Customize Dropdown Navigation Menu

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.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

@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)?

 

Edited by SolveigTraeet
Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

@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)

 

Bilde_2021-01-17_210421.thumb.png.1ef9459c49b478ef730410bcfd76b742.png

 

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

1475129516_Navigationmenu_1.png.99da6c7511978d2fe11ea23ac6396bb4.png

Link to comment
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)

 

Bilde_2021-01-17_210421.thumb.png.1ef9459c49b478ef730410bcfd76b742.png

 

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

1475129516_Navigationmenu_1.png.99da6c7511978d2fe11ea23ac6396bb4.png

Remove space withing image.

image.thumb.png.ec2f5b94cb2c088ec5c0ef3a92a77896.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.