Issues with topbar on mobile and social icons

Support
#1

Hello again! I trust you’re all well.

Can you please help with the following?

  • When viewed on mobile (vertical view), the phone and whatsapp numbers on the top bar appear on “top” on the social icons (please see attached screen shots)… they look fine if viewed horizontally, but not vertically

  • The “share this page” icons… specifically the Twitter, G+ and E-mail icons show up green… I believe I’ve set that color as default for other parts of the site. But I’d llike them to have their “own” color on this section (As the Facebook and LinkedIn icons)


  • We’ve started using the Convert Plus plugin that comes bundled with X. We’re wondering where the data that gets collected gets stored? At this point we’ve created one modal pop that shows up on a single page… it simply asks for the person’s name and phone number… we’re wondering where those get stored so that we can retrieve the info?

Thanks for all your help!!!

#2

Hello There,

Thanks for writing in!

  1. We cannot replicate the issue. We have tested your site in the emulator and in actual android phone and there is no issue in our screen.

  2. The icons will always be green or use the global settings you have set in X > Theme Options > Typography > Site Links. The facebook and linkedin icons were not green because you have added this custom css:

.x-icon-facebook-square{
  color:#3B5998;
}

.x-icon-linkedin-square{
  color:#0077B5;
}

If you want to change the color if the twitter, g+ and email icon, then you updated the code and use this:

.x-icon-facebook-square{
  color:#3B5998;
}

.x-icon-linkedin-square{
  color:#0077B5;
}

.x-icon-twitter-square{
  color:#0077B5;
}

.x-icon-google-plus-square {
  color:#0077B5;
}

.x-icon-envelope-square {
  color:#0077B5;
}

Make sure that you add the correct colors that you want.

  1. Usually, the data collected with ConvertPlus can be integrated using Mailchimp. I am sure what addon or integration did you use. Please check out this documentation: https://www.convertplug.com/plus/docs-category/mailer-integration/

Hope this helps.

#3

Thank you very much!!

  1. I’m still seeing the issue with the vertical on an iPhone X… I’m afraid I don’t have access to another device at the moment. Does it make sense it would only look like that on that iPhone? Anything else that can be done?

  2. Thanks for the help with the color of the social share icons… any chance one could change the hover color for those social icons just on that element?.. we’ve set the hover color to green and we want to keep it like that for social icons at the top bar and footer… but are wondering if for those at the social share element it can be another color

  3. That’s for your comments on the Convert Plus… I will check out the documentation.

Also. and sorry, I don’t know if I need to open a new topic for this but I’ll go ahead and include it on this thread:

We recently requested help to make the top bar fixed and we’re wondering if those adjustments caused this issue…

Once you open that page that space “shows up”… if you scroll a little it goes back to normal, but it looks weird at first. Can you please help us fix that?

Thanks!

#4

Hello @Jacko_Pinto,

  1. We will let some from our staff who has an iPhone to test this issue.

  2. To change the hover color of the icons, please add this code:

.x-entry-share .x-share:hover {
    background-color: transparent !important;
}

The last issue could not be replicated from our end. This could be just a caching issue. Since you are using SiteGround, could you please disable the supercacher in your hosting panel? The SuperCacher is developed by SiteGround exclusively for their customers. It increases the number of hits a site can handle and boosts the website loading speed. The SuperCacher includes 4 different caching options for maximum optimization of your websites. You can access the tool by clicking on the SuperCacher icon in your cPanel.

For more information about this, please check it out here: https://www.siteground.com/tutorials/supercacher/supercacher_intro.htm

Hope this helps.

#5

Thank you very much!

  1. Please let me know one you’re able to check that on an iphone2
  2. Worked great, thanks!!
  3. Thanks. I will look into that caching issue.

Best regards!

#6

Hi There,

Please also add this custom CSS:

@media (max-width: 767px){
    .x-topbar .x-social-global {
        margin-top: 25px;
    }
}

Let us know how it goes!

#7

Thank you. Is that to correct the issue with the header image leaving space at the right hand side before scrolling?

Thanks!

#8

Hi There,

That custom CSS will fix this issue.

I couldn’t replicate this issue on my end. The image currently is full width:

Regards!

#9

Hello.

I’m afraid I’m still seeing this on an iPhone even after including the suggested CSS code. Please see attached:

Also, I turned off the SupperCacher and cleaned the browser cache but I’m still seeing this space (see attached) before scrolling down the page:

Thank you for all your help!

#10

Hi,

I checked but can’t seem to replicate the issue. Can you try it on another computer.

Thanks

#11

Thank you, it’s working correctly now. Thanks for all your help!

#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.