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

Hover effect on index portfolio navigation (Squarespace 7.1)


yuliusstar21
Go to solution Solved by bangank36,

Question

Site URL: https://www.friends-n-family.com/

Hello to everyone. 

I'm searching for a solution to make a portfolio collection links on homepage to have hover effet. At this very moment not everyone understand that these titles are clickable (Screenshot 1). 

In the version 7.0 there was an option to underline these links on hover, which looked amazing. So I'd love this effect, or at least a change of opacity on hover. 

 

The second question about the portfolio pages - how can I remove the bottom navigation (Screenshot 2). 

Thanks in advance for your expert help! 

Screen Shot 2021-01-14 at 9.19.01 PM.png

Screen Shot 2021-01-14 at 9.19.18 PM.png

Link to post
  • Answers 4
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

Site URL: https://www.friends-n-family.com/ Hello to everyone.  I'm searching for a solution to make a portfolio collection links on homepage to have hover effet. At this very moment not everyo

Dear @bangank36 thanks for such a prompt answer.  It looks very close to what I want to get. I wonder if we could fix the code so the line do not grow too far away from the menu item. Adding a sc

Posted Images

4 answers to this question

Recommended Posts

  • 0
4 hours ago, yuliusstar21 said:

Site URL: https://www.friends-n-family.com/

Hello to everyone. 

I'm searching for a solution to make a portfolio collection links on homepage to have hover effet. At this very moment not everyone understand that these titles are clickable (Screenshot 1). 

In the version 7.0 there was an option to underline these links on hover, which looked amazing. So I'd love this effect, or at least a change of opacity on hover. 

 

The second question about the portfolio pages - how can I remove the bottom navigation (Screenshot 2). 

Thanks in advance for your expert help! 

Screen Shot 2021-01-14 at 9.19.01 PM.png

Screen Shot 2021-01-14 at 9.19.18 PM.png

You can try this in design->Custom CSS
 

.portfolio-hover-item {
    padding-right: 3.865rem;
    padding-left: 3.865rem;
}
.portfolio-hover-item .portfolio-hover-item-content {
    padding: 0 !important;
}
.portfolio-hover-item-title {
    display: inline-block;
}

.portfolio-hover-item-title::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: #fff;
    transition: width .3s;
}

.portfolio-hover-item-title:hover::after {
    width: 100%;
}
[data-collection-type="portfolio-index-background"].item-pagination {
  display: none;
}

image.thumb.png.1831353e558056404483faa02149d1d8.png

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 lightboxGeolocation Automatic Currency Converter, Sortable Table from GSheet
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 post
  • 0

Dear @bangank36 thanks for such a prompt answer. 

It looks very close to what I want to get. I wonder if we could fix the code so the line do not grow too far away from the menu item. Adding a screenshot to show the result. 

The code to hide pagination worked very well, thanks a lot for that! 

Screen Shot 2021-01-15 at 3.35.48 PM.png

Link to post
  • 0

In the code find this line and change the percentage value to fit your need

image.png.2a7609630242eee86dea67bd5210fa23.png

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 lightboxGeolocation Automatic Currency Converter, Sortable Table from GSheet
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 post

Create an account or sign in to comment

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


×
×
  • Create New...