SVG logo not shrinking upon scrolling

Hey Paul,

Thank you for your comment however as previously stated I build offline.

I might get back in touch with you when the site goes live however I’m not really interested in CSS fixes as this doesn’t usually solve the underlying problem - I want the product to work the way it should.

Many Thanks

Hi @j300bac,

Sure, SVG files are partially supported by some browsers since it has issues along with styling. It’s mostly noticeable in IE browser too. And maybe, it’s the reason it’s why it’s not supported by Wordpress’s media type by default.

Please let us know.


Hey Rad,

(in the interest of not sharing misinformation to readers) SVG files are supported by all modern browsers and are a popular choice of website logo’s for professional design because well…vector! In fact when saving your svg file you are given the option to view in the browser and can choose whether to adopt the nearest font or save as a flat image so you don’t lose styling. They’re not supported by wordpress as standard because they can contain and/or be infected by malicious code which makes them high risk for a general WP user.

nothing is supported by IE - this isn’t a problem :slight_smile: There are ways around this using fallback images.

Thanks I’ll give you shout when it is staged online to see what may be wrong with the theme :slight_smile:

Many thanks again for your time.

Hi @j300bac,

I’m not saying it’s not supported by modern browsers. What I’m saying is, it’s not fully supported (partially supported) by them in terms of SVG styling, especially the flex styling. I worked on SVG projects before, a Facebook app and it’s handled differently than standard image since it’s a vector (paths).

And I’m just saying issues regarding SVG are more noticeable since it doesn’t behave well on both SVG and flex styling. The issue varies from site to site due to many contributing factors, like layout spaces, flex alignment, and etc. And because of that, some CSS is really needed. It might not the universal fix, but it may be the only one applicable for that specific setup.

Sure, please let us know.


Thanks for the clarification Rad, however I can confirm that after testing this with a jpeg logo and png logo that I’m still having the same problem - glitchy movement and zero shrinkage using the advised settings above so we can definitely rule out the SVG theory.

I could use a helping hand on the following;

  1. SVG and social icons not shrinking upon scrolling.

  2. Slider not linking to relevant posts using {{link%}} in the link and seo section (FYI this method usually works with X but not in this pro setup)

  3. Trying to edit front page is near on impossible because of aggressive caching apparently however I have seen some of the same complaints since the last update. I’ve tried disabling WP-Rocket and the site isn’t connected to cloudflare at present. Tried browser caches etc and in the end the only way for me to edit (while offline using mamp pro) was to delete all sections and reinstate them again. I could do without doing this every time a sponsor needs inserting on said page.

The aggressive caching is something I am seeing from many a user - I only use one Pro install and all of my 13 X installs work fine using the same caching methods. My pHp versions are all the same, plugins etc…

I have now uploaded the site to a staging area to see what you guys can come up with. This is a fresh install - hardly any plugins activated that should be of any detriment.

Good Luck :slight_smile:


Hello There,

Thanks for updating in!

1.) Because the SVG logo and the social icons has a fixed dimension, it will not resize upon scrolling. What you can do is to add a custom class to your logo like my-logo in the “Customize” tab and then use this custom css so that it will reduce the height upon scrolling.

.x-bar img{
    transition: height 1s easeOut;

.x-bar-fixed img{
    height: 35px;
    width: auto;

I went ahead and made an example in your logo. Please check it out.

2.) You will need to make sure that the slide is link to a post and not to the next slide. Check out this documentation:
It should only be {{link}} and not what you have added {{link%}} which is in correct

3.) I did some further investigation and it turns out that you PHP time limit is set to 0. Please ask further assistance from your hosting provider and ask them to increase the PHP time limit to at least 300 to make sure that the Cornerstone will not be timed out.

I also noticed that you are using PHP version 5.6.36 and WordPress 4.9 requires at least 7.2 ( In most cases you cannot update your PHP version yourself and need to contact your host about this. The upgrade process is an easy process and should be something your host can do for you without affecting your website or charging you for it. Here’s a letter you can send to your hosting company:

Dear host,

I’m interested in running the open-source WordPress <> web software and I was wondering if my account supported the following:

- PHP 7.2 or greater
- MySQL 5.6 or greater OR MariaDB 10.0 or greater
- Nginx or Apache with mod_rewrite module
- HTTPS support

Looking forward to your reply.

Just a tip for you to easily check your page while editing in Cornerstone. You can always use the skeleton mode when editing for faster response and easy access of all the elements in the preview area. This is also helpful especially if one of the sections or elements is not visible or hidden in selected screen size or you may have applied visibility options to a section of element.

Hope this helps. Kindly let us know.

Hey RueNel,

Thank you so much for the detailed answer that’s very helpful.

  1. Thanks for the CSS work around attempt however the logo itself shrinks but doesn’t revert back after scrolling up again as you can see from my screenshots below. It’s pre-shrunk and still glitchy when scrolling… (cannot capture the glitch in a screenshot unfortunately as it’s quick but you can see it jump mid scroll)


Post scroll

I was sure that we were supposed to be able to carry out this function without the use of additional CSS.

1a) I forgot to ask in addition why I can’t seem to adjust the size of my logo in the native Pro settings too? I have always been able to adjust the size of my logo in my many previous X installs but Pro will not allow me to have a custom width without using CSS? Should I be able to adjust my logo size with Pro as a standard to void the above? I have two options “retina” or not - neither allow me to adjust the pixel width manually… :man_shrugging:

2.) You were right with the rev slider links problem - there seems to be outdated advice from theme punch which is the only info that comes up on google search :frowning: Thank you for the fix, I have implemented this on my offline version and made some major tweeks so this entire slider in the staging area can be disregarded.

  1. R.E pHp version - that is correct on the live version but on my local servers I have pHp 7.2 so this leaves me scratching my head somewhat… it’s coincidental that this particular staging area is outdated but I’ve since updated to pHp 7.2 and increased my time limit to 300 yet still having the problems.
    This is indeed a bug in the Pro theme from what I can see in the forum and I’m not able to develop the front page further without deleting everything first.

  2. Using SuperFly with Pro header. I’m assuming that there is not a native way of achieving the superfly layout and functions in the Pro header without using SuperFly? If there is could you point me towards the relevant knowledge base?

  3. When under 750px or mobile view you will see that the logo aligns left for some reason. Is there a native control that allows me to align the logo in the centre the way it is supposed to be as I have my hamburger menu aligned left. This relates to question 4 of course because if there is a way to use Pro without SuperFly then I will do so.

Thanks for the heads up on skeleton mode! That’s very helpful and I do already utilise it however it’s nice to be able to use the full function in an ideal world particularly when you build offline like I do and everything is instantaneously responsive making build time much faster. I do not rely on internet speeds when building so this function should always work.

Many Thanks for all of your help in this matter.

Hey Jay,

  1. Yes, you won’t need CSS. There’s probably something causing the issue in your site as the image shrinking works in my test site. I’ve tested JPEG, PNG and SVG. In this screencast, I’m using SVG. We would really need to see your setup for us to continue investigating.

The Social element does not have a shrink feature and shrinking them would require custom development.

  1. We understand the the “Aggressive Caching” message is common but this is not a bug. It just means, there is something in the site causing that and the most common is of course, caching. Next one is third party plugins so you also need to try testing for plugin conflict. Low memory is also common so you need to increase your memory limit to 512mb.

If nothing helps, we would also need to check your site so you will need to give us WP Admin and FTP access.

  1. Yes, there is no native way to add Superfly to the header so this would also need custom development.

  2. Try setting your Bar’s Flex Layout > Horizontal to Center

The Header and Footer builders use Flexbox. In order to understand how the layout options work, you need to understand Flexbox. We have a tutorial for that in our Knowledge Base. The Flexbox tutorial is under the Element Resources section.

Lastly, please open separate threads for each topic because the longer threads get, it often becomes confusing. Let us keep this thread for the shrinking issue.


Hi Christian,

I have provided credentials so that you can investigate the problem further with acute details as to the problems that have arisen.


Slider Revolution bundled with Pro/X is apparently causing Javascript issues in Pro as well as many other plugins out there from what I am witnessing.

FIX: Navigate to Rev Slider Global Settings: Select insert Javascript into footer - this will solve restricted functionality in the header builder.

CONCLUSION: There’s a very good reason why I highlight all issues in one thread making it easier to pin point what may be causing the problem.

  1. Fixed but not smooth in the slightest - glitchy in two movements. Initial shrink and rest of bar shrink. (js error above)

1a) resolved (js error above)

  1. Resolved (themepunch outdated links above)

  2. Unresolved - still having load issues on the page builder in Pro only (NOT X)

  3. Thanks for the info.

  4. Resolved using Christians method (Flex Layout > Horizontal to Center) - good if you’re left aligning hamburger menu.

Issues 1 (slightly) and 3 (high priority) remaining.

Many Thanks for your continued support.

2 days and no response?

Hey Jay,

We’re very sorry for the delayed response. There was a problem with our system.

1.) I duplicated your header to test why the Image Scaling does not work with SVG in your site and I discovered it’s because of SVG scaling. See SVG scaling is tricky and we could not discuss that as part of our support. But, I’ll post this in our issue tracker maybe our development team could enhance the Image Scaling feature in the future.

For now, you’ll need to use the CSS provided by @RueNel previously. The effect of the provided code is not smooth though because the transition value has a typo. I changed it to the code below so in order for the effect to be seen clearly and smoothly.

.x-bar img{
    transition: all 0.4s;

.x-bar-fixed img{
    transform: scale(0.7);

3.) I experienced the issue in your site. We would FTP access for this also in order for us to try some troubleshooting procedures.


Hi Christian,

Thank you for the temporary work around! I was pretty sure that I tested it with a jpeg and a png file too and it still didn’t work?

I’ve added a secure note with FTP credentials attached for you to investigate further. If you find the solution could you share it with me as I’m miles ahead on my offline version than the staging area which you have access to. I kind of know it can’t be my servers or caching because I don’t use the caching plugin on my MAMP set up.

Good luck :slight_smile:


Hey Jay,

Scaling works with standard image formats in your site. See

The Cornerstone issue might be related to PHP version. Please try downgrading to 5.6 just to test. It would also be best to completely uninstall WP Rocket so the htaccess is cleared of its rules making it easier for troubleshooting.


Hey Christian,

Thanks for the advice but I was already on PHP 5.6 and was recommended by RueNel below so we can definitely rule that out.

The issue began before I installed WP Rocket - I actually installed it to try and help as it gives me a clear cache function out of the box. I use WP Rocket with many X built sites, I really cannot see it being a part of the problem… Also I can confirm that I have removed WP Rocket in it’s entirety including all data in the .htaccess folder from WPRocket Begins to ends.

This now definitely concludes that the problem is with Pro and nothing else - we have tried everything else and now your suggestions are being reciprocated from the earlier thread which is costing time.

Did the troubleshooting via FTP prove to be inconclusive? The site is due to be launched tomorrow and I’m beginning to think I should change themes in a final effort for as long as Pro isn’t working for me.

PS. As you know I have a fair few licences and have been building with X since the very beginning. I have to say that I absolutely love Pro so far aside from these hiccups. It will be perfect (for me) when it’s functioning as it should. This is my first Pro experience and the transition has been pretty smooth a part from these few things.


Hi @j300bac,

We’ll continue checking, it works on my end so I can’t rule out this is Pro issue alone. But we’ll see once we gathered more information. Please use the temporary workaround for now.


Hi Rad,

Temporary work around for the page builder? There isn’t one I’m afraid - it’s kind of the main selling point no?

Correct me if I’m wrong but we’ve ticked off all of the possibilities to the point where several suggestions had been reciprocated which if I believe in all of my years of living means that the problem isn’t with any of the third party suggestions that have been blamed.

I also have this installed on two set ups as I’ve mentioned roughly 8 times now - LIve and not live… same problem - Key clue there!

I also have many X sites and one Pro in which this problem is only occurring in Pro - kind of another indicator?

Also I recall this happening in X once upon a time when cornerstone replaced X shortcodes to which it was confirmed as an X issue which was then fixed on the next release…

I have been more than willing in this matter and have done everything that has been asked DESPITE knowing that none of the supposed conflicts were of any issue - This is a 7 day thread! Seven days… surely you want to move on from it? I really do!
Could you give me a timescale as to when this product I purchased will work the same as the other licences I’ve purchased during the last 5 years?

I’m holding back from enquiring on third party social media platforms because I have every faith in support resolving this outside of the generic answers - please don’t prove me wrong guys…

Hey Jay,

Sorry for the confusion. And, I’m sorry I forgot that you’re already using PHP 5.6. I saw some 7.1 number when I checked your configuration and thought you’re using PHP 7.1. Pro will still work with 7.1 though but it depends on the configuration. I personally do not know what is causing the issue in some setups yet.

Also, this is what I mean that the longer the threads get, the more it gets confusing for us support staff so if you could open a separate thread only for the Pro issue, that would be great. You can post a link to this thread for reference that we’ve tried everything.

Here’s the last thing you can try and we’ll escalate this issue. Update to the latest version of Pro. There’s a performance fix added to the latest version along with a lot of fixes. Hopefully, this would resolve the issue.


Hi Christian,

Sorry buddy but RAD has come into the new thread that you had requested and asked that it be put back into this thread…

It’s all in your hands - you literally have everything you need to figure out why this install isn’t working. There is nothing more I can do so I will leave it in your capable hands.


Hi @j300ba,

Let’s continue the discussion here, I love to solve the issues as much as you do :slight_smile:

But before we continue, could we try listing the issues we’re discussing here? Like a clarification, then we’ll check it one by one. Just put them in a listing, it’s easier to follow a list in a single reply so we could mark them while we’re discussing and what’s been solved. As of now, what I just understand is the SVG issue as the title says which we’re still checking on our end.