Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 2

How do I add a switcher icon for "home" portfolio navigation


kiyary

Question

Site URL: http://kiyary.com/portfolio

Hello guys!

I've been googling this for days, and I cannot find the answer, so I decided to post the question.

I would like to add an icon to go back to "all the projects" to my portfolio navigation in line to the previous/next, once I am in any project, just like the: 

<"name of the previous project"     >icon here<    "name of the next project">

I will attach an image of what I want. 🙂 I have seen it on other portfolios in Squarespace. If this is also possible to add in the blog, that would be amazing.

Also, I would love to be able to change the size of the navigation arrows (< / >) which are huge. 

Another question, is, is it possible to use a masonry grid for the portfolio instead of the available? (if I need to post this question somewhere else, just let me know 🙂 )

Thank you so much!

(I cannot upload an image, I get an error (Error code: -200) 😞 )

Link to comment
  • Answers 4
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

4 answers to this question

Recommended Posts

  • 0
On 9/30/2021 at 2:06 AM, kiyary said:

Site URL: http://kiyary.com/portfolio

Hello guys!

I've been googling this for days, and I cannot find the answer, so I decided to post the question.

I would like to add an icon to go back to "all the projects" to my portfolio navigation in line to the previous/next, once I am in any project, just like the: 

<"name of the previous project"     >icon here<    "name of the next project">

I will attach an image of what I want. 🙂 I have seen it on other portfolios in Squarespace. If this is also possible to add in the blog, that would be amazing.

Also, I would love to be able to change the size of the navigation arrows (< / >) which are huge. 

Another question, is, is it possible to use a masonry grid for the portfolio instead of the available? (if I need to post this question somewhere else, just let me know 🙂 )

Thank you so much!

(I cannot upload an image, I get an error (Error code: -200) 😞 )

Do you mean adding an icon at center position (like in my below image) that directs your site back to https://www.kiyary.com/portfolio when clicked?

image.thumb.png.9993023fe7d0fc93098de4919427c8ed.png

Edited by bangank36

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0
14 hours ago, bangank36 said:

Do you mean adding an icon at center position (like in my below image) that directs your site back to https://www.kiyary.com/portfolio when clicked?

image.thumb.png.9993023fe7d0fc93098de4919427c8ed.png

YES! that's exactly what I meant! I will try to attach an image now, I want to make something like this: 721263755_ScreenShot2021-09-29at20_31_58.png.cffbfdd4e3874c1b1650253d78c34614.png It could direct me to "home" or to the "portfolio" page. I would love it if I could choose.

I am also trying , to use the image gallery on the home page as the portfolio , since portfolio doesn't have masonry style; I wanted to try to use this code fromhttps://www.ghostplugins.com/steps/wj7238uh  to add hover text to make it behave as the portfolio page,  but it is not working, any ideas why?

// Grid Gallery Zoom //

@media all and (min-width:770px){
  .sqs-block-gallery .sqs-gallery-design-grid .slide:hover img{
    transform: scale(1.1);
    -webkit-filter: brightness(60%);
    filter: brightness(60%);
  }
  .sqs-block-gallery .sqs-gallery-design-grid .slide:hover .image-slide-title{
    opacity: 1  
  }
  .sqs-block-gallery .sqs-gallery-design-grid .slide img{
    -webkit-transition: all 1s ease-in-out !important;
    -moz-transition: all 1s ease-in-out !important;
    -o-transition: all 1s ease-in-out !important;
    transition: all 1s ease-in-out !important;
  }
  .sqs-block-gallery .sqs-gallery-design-grid .image-slide-title{
    position: absolute;
    opacity: 0;
    top: 40%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    pointer-events: none;
    -webkit-transition: all 1s ease-in-out !important;
    -moz-transition: all 1s ease-in-out !important;
    -o-transition: all 1s ease-in-out !important;
    transition: all 1s ease-in-out !important;
    z-index:99999999999;
    font-size: 50px !important;
    font-weight: 400 !important;
    color: #ffffff!important;
    padding: 10px;
  }
}

Thank you so much for helping!! 😄 you people are so awesome!

Link to comment
  • 0

Oh, extra question, I would love to have that icon for now, as I see it simpler to do, or (I don't know if it's possible) but I would love to have a "portfolio block" ( I don't know if it's called as such) bellow. What I mean is if there's a way to open (expand) the project selected above the portfolio. I will try to find an example of what I mean. 
Thank so much!!! 🙂 🙂 🙂 🙂

Link to comment
  • 0

Hi kiyary!

I wrote  a blogpost about this, including a short video and copy-pasteable code on how to achieve this + some thought on improving the UX based on some studies regarding icons vs text labels

-Fenix / code + tonic

P.S. I'm one of the top freelance Squarespace specialists and  also available for freelance consulting.

Edited by codeandtonic

Code + Tonic — We solve Squarespace Problems

The best of the best 💕 
Custom code, strategy, analytics, design and CSS edits. 

Get in touch via codeandtonic.com

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