Jump to content

Customize Dropdown Navigation Menu

Recommended Posts

  • Replies 13
  • Created
  • Last Reply
  • 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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.