Make service thumbnail "active"

Hi,

My website is: www.advsupport.pl

I need to make the icons in “USLUGI” section, active, so they will work the same as titles beneath them.
So when you click on icon or title, it should go to services description section.

I would really appreciate your help!

Here is my custom CSS (i know its messy):

#mainnav{
  margin-top: 24px;
} 

#menu-item-695 {
margin-top: 2px;
}

.site-logo 
{ 
margin-top: 2px; 
margin-bottom: 2px;
}

.contact-address
{ 
 max-width: 300px;
  margin: left
}

#text-2{ 
margin-bottom: -30px;
}

#sydney_contact_info-2{
margin-left: 50px;
}


#text-3{ 
margin-left: 50px;
height:470px;
}

.site-info.container
 {
    display: none;
}

.roll-testimonials .whisper {
   font-size: 16px;
}

@media only screen and (max-width:991px){
  .roll-testimonials .whisper {
     font-size: 12px;
padding: -20px;
display: block;
  }
}
#mainnav-mobi a {
   text-align: center;
}


.single-projects #primary.col-md-9 {
  width: 100%;
}

.single-projects #secondary,
.single-projects .meta-post,
.single-projects .comments-area {
  display: none;
}


.entry-thumb {
  display: none;
}

.entry-content .entry-thumb {
  display: block;
}

.single-projects .entry-header {
  text-align: center;
}

.wpcf7-form label {
display: block;
}

.wpcf7-form label input {
  width: 100% !important;    
}   

.preloader .pre-bounce1, .preloader .pre-bounce2 {
    display: none;
}
.preloader .spinner {
  display: none;
}

.wpcf7-form label {
  display: block;
}

.wpcf7-form label input {
  width: 100% !important;    
}   

@media only screen and (max-width:991px) {
    #text-2 {
        margin-left: 0 !important;
    }
}

#text-2 {
margin-left: -250px
}


input[type="submit"]
{
float: right;
}

.div.wpcf7-response-output, div.wpcf7-validation-errors { display: none !important; }
span.wpcf7-not-valid-tip { display: none; }

.col-md-12 {
margin-top: 30px;
margin-bottom: -70px
}

.site-header {
background-color: white !important; 
}

.site-header.float-header {

  background-color: #fff !important;
}

@media only screen and (max-width:991px){
.site-header.float-header{
  padding: 20px 0 !important;
}
}

.text-slider .maintitle:after,
.panel-grid-cellafter{
  display: none;
}  


.single-services #primary.col-md-9 {
  width: 100%;
}

.single-services #secondary,
.single-services .meta-post,
.single-services .comments-area {
  display: none;
}

.single-services .entry-header {
  text-align: center;
}

.content > p {
display: none;
}

@media only screen and (max-width: 479px) {

  .roll-project.fullwidth .project-item {
      width: 50%;
 }
  }

@media only screen and (max-width: 479px) {
.roll-testimonials .whisper {
   font-size: 14px;
}
}

.btn-menu {
color: #2d2e34;
}

.quotes-box{
    background-image: url("http://deborahgoodchild.com/wp-content/uploads/2016/03/Testimonial-Background.jpg") !important;
    background-attachment: fixed !important;
}

.text-slider .maintitle, .text-slider .subtitle {
    text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.5) !important;
}

.panel-row-style.quotes-box{
  background-attachment: scroll !important;
  background-position: top center !important;
}

.slides-pagination{
  position: relative;
  margin-top: -150px;
  z-index: 9999;
  text-align: center;
}

.slides-pagination a{
  display: inline-block;
  width: 12px;
  height: 12px;
  margin: 3px;
  background: #d3d3d3;
  border-radius: 100%;
}  

.slides-pagination a.current{
  background-color: #c33c48;
  color: #000;
}  

#panel-220-0-0-0 .textwidget p {
text-align: justify;
    -moz-text-align-last: center;
    text-align-last: center;
}

#pg-220-1 {
	border-bottom: 1.5px solid rgb(224, 224, 224);
}

#pgc-220-0-0 {
		border-bottom: 1.5px solid rgb(224, 224, 224);
}

#panel-220-0-0-0 .textwidget p {
	margin-bottom: 90px;
}

#pgc-220-1-0 {
	margin-bottom: -30px;
}

.nav-next {
	display: none;
}
.nav-previous {
	display: none;
}

#pgc-220-6-0 .widget-title
{
	display:none;
}

.slides-pagination a {
  text-indent: -9999px;
}

Hello,

It looks like you are still using Sydney 1.30. You can try to update it to the latest version, it should enable desired behavior that you have described above.

But please remember about importance of regular full site backups (files and database):
https://codex.wordpress.org/WordPress_Backups

Also you might want to check this tutorial:

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

Hi,

Thank you for your reply! Is it possible that upgrading Sydney theme will make something on my website collapse, or change the appearance of actual website? Is there any way to make the thumbnail active, without upgrading the theme?

Thanks in advance!

Hello,

Is it possible that upgrading Sydney theme will make something on my website collapse, or change the appearance of actual website?

Usually updates are going smoothly but you may encounter issues if you directly modified theme files, for example. That’s why I suggest to at least make a backup in such cases, but staging site is also very useful to test updates. Yes, it might take much time to properly create a staging site, but it potentially can save much more time in future by preventing you from applying problematic changes/updates on production site.

Is there any way to make the thumbnail active, without upgrading the theme?

I don’t think that there is an easy way to do it properly without theme update, I think that the easiest and most proper way is to update the theme (but please remember about backup/staging).

Kind Regards, Roman.