Footer links are not clicable

Support
#1

Hi support team. I have a custom footer here https://dev.cirquedelapointeseche.com and all the links in the footer are not clicable. There is three links:

  1. Creative commons logo and text
  2. Phosphore logo
  3. écommunication logo

I hahe tried to change the Z-Index of the 2 bars in the header (9998 and 9997) and the bar in the footer is 9999.

Thank you for the help.

#2

Hi Philippe,

Thanks for writing in! Upon inspecting your container inside the footer bar, I see that it’s z-index is set to 5.

Please set it to 9999 as well and your links should started to function again.

Please make sure to clear all caches when testing your site again (https://www.wpbeginner.com/beginners-guide/how-to-clear-your-cache-in-wordpress/).

Let us know how it goes.
Thanks!

#3

Where is the container z-index setting?

#4

Hi Philippe,

Upon checking your issue further, it seems to be the .x-bar-content and not your container (x-bar-container) having that z-index.

I have assigned the class name .my-footer-bar to your footer bar and then added the following CSS rule to fix your issue.

.my-footer-bar .x-bar-content {
    z-index: 9999;
}

Thanks!

#5

Thanks @mldarshana. I have made my header differently to fix à layer problem and that have fixed the clickability of the links.

Now I have a problem with my footer on phone screen width. In the page builder everithing is correct

But on a real phone (iPhone 4) the footer is overlaping the content of the page.

Thanks for the help.

#6

Hello @Philippe,

It seems that you have forgotten that you added inline css height:100vh; in each of your section. Please remove that and place it in the element css instead. You can insert this code in the element css:

@media(min-width: 980px){
  $el {
   height:100vh; 
  }
}

This should resolve your issue.

#7

Hi @RueNel. Thank you for the code but the 100vh do not work in the portrait display like iPad 768 x 1024 and 834 x 112 pixels and under.

I change the code to that for the bar displayed on smaller screens. Problem fixed. Thanks!

@media(min-width: 980px){
  $el {
   height:100vh; 
  }
}
#8

Hey Philippe,

Glad you’ve sorted it out.

#9

Sorry but I see that the code I change do not work on small screen

#10

Hey Phlippe,

Your mobile section has this code:

@media(min-width: 320px){
  $el {
   height:100vh; 
  }
}

You should remove it.

Thanks.

#11

Thanks. Fixed.

#12

We are delighted to assist you with this.

Cheers!

#13

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.