Social media icons not clickable

[peglegsqueeks]

Updated to latest versions of X-theme, WP, Cornerstone

My social media icons on the top bar are not working. You can’t click on them.
The social media icons on the footer are working ok.

Also I’ve been unable to increase the size of the icons. Is there a better way than using
css font-size: 40px;

Please help I can’t find an answer on the forums.

My Website is https://bookworkpro.com.au

Kind Regards
Chris

[friech]

Hi Chris,

Thank you for writing in, please clear all your caching features (plugin, server-side, CDN, and browser’s cache) after updating so that the code from the latest release is always in use. This will help you to avoid any potential errors.

If the issue persists and since the site is in under construction, please provide us login credentials in a secure note so we can take a closer look.

@Themeco1

###Secure Notes

It is very common to need to share sensitive information with our staff such as login or FTP information. In order to keep this private, be sure to use the Secure Note button that you will find at the bottom of each reply.

Cheers!

[friech]

Hi Chris,

Thank you for the credentials, that issue is happening because the logobar is overlapping with the topbar, although this is not visually true, but this is the real case, the logobar is covering the topbar that is why you can not click the social icons.

To resolve this you can add this to Theme Options > CSS

.x-topbar-inner {
	z-index: 1031;
}

But there is a small catch on this, since the topbar is now the upper layer, part of your logobar will be covered and part of your logo will not be clickable.

Cheers!

[peglegsqueeks]

@friech

.x-topbar-inner {
z-index: 1031;
}

Thank you so much this worked perfectly.
I knew I was pushing it to have my topbar and logobar overlapping!

Is there an easy way to increase the size of the social media icons?

Kind Regards
Chris

[ruenel]

Hello Chris,

The only way to increase the size of the social media icons is to use custom css. Please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.x-topbar .x-social-global a {
  font-size: 32px;
}

Best Regards.

[peglegsqueeks]

Worked well…
Thank you so much.

Can you tell me the difference between:
.x-topbar .x-social-global {
font-size: 32px;
}

AND

.x-topbar .x-social-global a {
font-size: 32px;
}

What does referencing the “a” actually do?

Cheers
Chris

[christian]

Hey Chris,

a targets the actual links inside the .x-social-global container.

Hope that helps.