SVG logo not shrinking upon scrolling

Hi all,

Long time no speak! So as my header says - logo isn’t shrinking on scroll.

I cannot provide any details as it’s being built on my local server as this is for a live newspaper.

I have my sticky scroll on and set to 6. I have toyed around with this but the logo itself won’t shrink as you can see. Do you have any ideas as to how I can fix this without CSS (trying to avoid excessive css if pro has this feature built in)

after scrolling

Hello @j300bac,

Thanks for asking. :slight_smile:

Please try out following settings:

  1. Turn on Content scrolling and sticky bar under Bar > Setup. Try changing the value of Shrink amount to let’s say 0.7 under Sticky Setup.
  2. Logo image element: Under select Scaling Setup > Type.

Let us know how it goes.

Thanks.

Thanks for getting back to me!

When changing to 0.7 the header contains the image but at it’s original size - some progress but no logo shrink.

When selecting scaling previously and upon your instructions - the logo completely disappears :confused: Is this because it’s an SVG file do you think?

Hi @j300bac

I don’t think it could be related to SVG, I’ve installed “SVG Support” plugin to allow uploading SVG images in WordPress, then I tested inserting an image with shrink option in one of the headers bars, this is what I got:

If you want to get the image itself reduced in height, then I suggest adding a custom CSS class to this bar, let’s say shrinkit and add this CSS code to the header custom CSS area:

.x-bar-fixed.shrinkit img {
    height: 50px;
}

Thanks.

Hi Alaa,

Unfortunately that CSS isn’t doing anything from what I can see. Also when scrolling the logo is appearing somewhat “glitchy”. I’ve disabled all plugins but I believe the theme is not quite functioning the way it’s supposed to unfortunately :frowning:

I understand that this isn’t an easy thing to solve being offline but I cannot have this live as it is an active newspaper.

Thanks for your help so far.

J

Hi,

We need check your site and settings.

If it is not ready yet, you may install this extension so only login users can see your site.

http://demo.theme.co/under-construction/

Thanks

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.

Thanks!

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!

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:

J

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 .x-image.my-logo img{
    transition: height 1s easeOut;
}

.x-bar-fixed .x-image.my-logo 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: https://www.themepunch.com/revslider-doc/link-seo/#slidelink
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 (https://wordpress.org/about/requirements/). 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 <https://wordpress.org/> 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)

Pre-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: https://www.themepunch.com/faq/hyperlinking-post-based-sliders. 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.

Thanks.

Hi Christian,

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

UPDATE FOR ANYONE EXPERIENCING PRO HEADER ISSUES:

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 https://youtu.be/SHzvJzrQWjk. 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 .x-image.my-logo img{
    transition: all 0.4s;
}

.x-bar-fixed .x-image.my-logo 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.

Thanks.

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:

J

Hey Jay,

Scaling works with standard image formats in your site. See https://youtu.be/XCKXUqVB_mA

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.

Thanks.

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.

J