Mansory Project

Hello!

I am working with the Pert Theme, Mansory Project plugin. I am using this portfolio to show fun facts on the hover effect. However I want only ONE fun fact/project to be clickable and jump to an URL. So out of the 8 projects/fun facts I have, only 1 should be clickable, going to another site. Can I do it somehow?

I tried the following shortcode: .projects-area .project-title{
padding: 0;
}

.projects-area .project-title > a{
display: flex;
top: 0;
height: 100%;
align-items: center;
justify-content: center;

}

But it is not good for me. It makes all the 8 projects/funfacts go to another page. I do not want this.

My site: zsombordeak.com

Thanks a lot in advance!

Hello there,

To CSS on target specific project item, you can use this selector:


.projects-area .project-item:nth-of-type(4) .project-title {
  padding: 0;
}

.projects-area .project-item:nth-of-type(4) .project-title > a {
  display: flex;
  top: 0;
  height: 100%;
  align-items: center;
  justify-content: center; 
}

:nth-of-type(4) pseudo selector means the fourth item.

Regards,
Kharis

Hi Kharis,

Thanks for the very quick response!

I tried the code you just sent, but still all my projects are clickable.

Any other ideas?

Hello there,

Please try to edit your project. In the Prohect data box enter # into the link option.

Let me know how it goes.

Regards,
Kharis

Hi Kahris,

I added # to my 4th project as you suggested. Also copied the shortcode you suggested: .projects-area .project-item:nth-of-type(4) .project-title {
padding: 0;
}

.projects-area .project-item:nth-of-type(4) .project-title > a {
display: flex;
top: 0;
height: 100%;
align-items: center;
justify-content: center;
}

But nothing happens.

Right now I do not have any Project custom link added to any of my projects. But still all 8 are clickable. Should I put the # you suggested and the link I want the project to jump to? Or how?

Does the code remains there? Please try adding this:


.projects-area .project-item:nth-of-type(4) .project-title {
  border: 2px solid red;
}

Can you notice the difference?

> Right now I do not have any Project custom link added to any of my projects.

If the custom link is empty, your project will link to its respective single page. # means no link will be applied.

Regards,
Kharis

Thanks for the quick work!

Now I have all 3 codes you suggested, my Additional CSS looks like this:

.projects-area .project-item:nth-of-type(4) .project-title {
padding: 0;
}

.projects-area .project-item:nth-of-type(4) .project-title > a {
display: flex;
top: 0;
height: 100%;
align-items: center;
justify-content: center;
}

.projects-area .project-item:nth-of-type(4) .project-title {
border: 2px solid red;
}

I added # to 7 projects, that I do not want to be clickable. I added a URL to the 4th project which I want to be clickable.

With the last code you sent, I see a difference. The 4th project has a red line around the image when I hover over it.

Now, still all my projects are clickable. But the 4th one jumps on another site. The rest jumps to the top of my homepage.

How can I make the 7 other pages UNCLICKABLE? So when I put the cursor on them, the hovering layer with the text appears, but I can not click?

Thanks!