Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • October 5, 2021 at 12:42 pm #1323624
    fkm

    Hello Enfold team,

    since the last Enfold update the logo on my website has suddenly disappeared. The logo is an SVG file and has worked fine in combination with the WordPress “SVG Support” plugin before.
    Please help me get it back.

    Thank you very much in advance.

    Best regards,
    fkm

    October 5, 2021 at 12:47 pm #1323625
    Yigit

    Hey fkm,

    Thanks for contacting us!

    Could you please replace the content of /enfold/framework/php/class-svg-images.php file with – https://github.com/KriesiMedia/enfold-library/blob/master/temp_fixes/Enfold_4_8_6_4/framework/class-svg-images.php in Appearance > Editor?

    If you would like us to update the file for you, please create temporary admin logins and post them here privately :)

    Best regards,
    Yigit

    October 5, 2021 at 3:01 pm #1323656
    fkm

    Hey Yigit,

    thanks for your fast reply.

    I just did how you said (at least I think I did) but nothing happend.
    Please take a closer look.

    Thank you very much in advance.

    Best regards,
    fkm

    October 5, 2021 at 4:49 pm #1323669
    Yigit

    Hi fkm,

    I am not sure what exactly the issue was however @guenter suggested that it could have been related to content structure of SVG file so I tried uploading another SVG logo and it showed up. Then following the hints from Günter, I recreated your SVG logo, removed existing one and uploaded newly created one and it showed up.

    Please review your website :)

    Best regards,
    Yigit

    October 5, 2021 at 5:04 pm #1323674
    fkm

    Hi Yigit,

    thanks for your fast reply and for your help.

    Now it looks like before on the big screen.
    But in the mobile view it´s displayed far too large?

    Please help.

    Best regards,
    fkm

    October 6, 2021 at 12:16 pm #1323756
    fkm

    Hi again,

    before the Enfold update, I uploaded a logo in SVG format at the Enfold theme options using the “SVG Support” plugin and with it I replaced the former pixel-based logo (PNG).
    The SVG logo apperaed in the same way as the PNG logo (same size/dimension) on any device (but with the advantage of lossless scaling).
    It looked like this (please see the screenshots): logo-png_homepage.jpg and logo-png_flyout-menu.jpg

    With the Enfold update it disappeared suddenly.
    After Yigit kindly recreated my SVG logo (following the hints from Günther) – on this point, thank you again for your support – it showed up again.
    Untfortunatelly not in the same way as before (at least on mobile devices it was shown way to big and on the flyout menu it disappeared).
    Please see screeshots: logo-svg_homepgae.jpg and logo-svg_flyout-menu.jpg

    Btw: I just found out that the original SVG logo showes up again when using the plugin “Safe SVG” instead of “SVG Support”.
    But unfortunately in the same way as just described (too big on mobile devices/not on the flyout menu anymore).
    So unfortunately, this is not the solution.

    Please do not understand my description as a reproach, but as an indication that may reveal the problem.

    Thank you in advance for your reply.

    Best regards,
    fkm

    October 7, 2021 at 3:36 pm #1323942
    Yigit

    Hi fkm,

    Thanks for the information!

    I have selected your SVG logo as logo and then added following code to bottom of Quick CSS field

    @media only screen and (min-width: 768px) and (max-width: 989px) {
.responsive .logo a {
height:90px !important;
}
}

@media only screen and (max-width: 767px) {
.responsive .logo a {
height:80px !important;
}
.responsive #top .logo {
    z-index: 101;
    position: relative;
}
}

    Could you please review your website? :)

    Best regards,
    Yigit

    October 12, 2021 at 12:10 pm #1324525
    fkm

    Hi Yigit,

    thanky you very much for your reply/help.

    First of all, the SVG logo in combination with the code looks good on big screens (desktop).
    However, it´s still shown too big on the mobile devices browser simulation (iPhone7).
    Please see screenshot: iphone7_browser_simulation-01.jpg
    It looks the same on the real iPhone7. And here I can´t activate the menu burger symbol anymore.

    If I change the height e.g. 50 px instead of 80 px in the code you gave me, it looks correct at the browser simulation for iPhones.
    Please see: iphone7_browser_simulation-02.jpg
    But in this case it´s shown way to small on the real iPhone7.
    Please see: iphone7_real.jpg
    Here I can activate the burger menu again and the logo is also retained when the menu flies in (which is also wanted).

    Please let me know how to fix it.

    Thanks in advance.

    Best regards,
    fkm

    October 13, 2021 at 3:03 pm #1324763
    Yigit

    Hi fkm,

    I am using iphone 7 as well however I cannot reproduce the burger menu issue on my end. I attached screenshots in private content field.

    As far as I understood, you would like to display your logo smaller. If that is the case, could you please try changing 80px to 70px or 60px?

    Best regards,
    Yigit

    October 15, 2021 at 11:40 am #1325078
    fkm

    Hi Yigit

    thanks again for your reply and for your patience. :)

    I have now reduced the size of the logo and uploaded it again as SVG.
    I have also placed the burger menu on the right side again (before it was on the left side) because of a better usability with one hand.
    Then I removed a few codes relating to logo settings from my quick css field, which are no longer needed and could possibly even lead to complications with other codes (!?).

    With your support, I was able to make almost all changes as desired.
    It (still) looks great on big screens and tablets.
    Plus I can activate the burger menu again on my smartphone and and the logo remains fixed when the menu flies in. Great.
    Only the logo appears still too big on smartphones and I´d like to adapt it to the other views (same size and position).
    Please see screenshot.
    I tried around with several codes and values (I also tried to change the 80px for logo height as you wrote before).
    Unfortunately, I couldn’t do it on my own.
    So please help (again).

    Thanks a lot in advance.

    Best regards,
    fkm

    October 16, 2021 at 4:42 am #1325200
    Rikard

    Hi,

    Thanks for the update. I added this to the bottom of your Quick CSS box:

    @media only screen and (max-width: 767px) {
span.avia-svg-logo a svg {
    max-width: 50%;
}
}

    Please check your site, and adjust the value if needed.

    Best regards,
    Rikard

    October 19, 2021 at 9:30 am #1325533
    fkm

    Hi Rikard,

    first of all, thank you very much for your support, the code works well.
    I adjusted it by using a pixel value because it still was too big in landscape format on my smartphone.
    And now it looks great (just as desired). :)

    I only have one more question on this one:
    If I tap the logo on the smartphone with my finger (e.g. to go to the home page), the entire surrounding area is briefly highlighted in gray.
    I caught this moment and took a screenshot (please see below).
    Is there a way to remove this (according to the Enfold logo if I don’t upload my own)?

    Thanks a lot in advance.

    Best regards,
    fkm

    October 20, 2021 at 11:49 am #1325705
    Yigit

    Hi fkm,

    I added following code to bottom of Quick CSS field

    
.logo a { -webkit-tap-highlight-color: rgba(0,0,0,0); }

    Please review your website :)

    Best regards,
    Yigit

    October 21, 2021 at 11:58 am #1325845
    fkm

    Hi Yigit,

    exactly like that – great.
    Thank you so much.

    Now that I see how stylish it looks/feels without the highlight color, I wonder if I can transfer this to all other links on my website as well (e.g. to the mobile menu/burger and others). Should I start a new thread for this topic?

    Best regards,
    fkm

    October 21, 2021 at 1:14 pm #1325860
    Yigit

    Hi,

    If you would like to apply this to all links, you can simply use following code on all of your websites

    
#top a { -webkit-tap-highlight-color: rgba(0,0,0,0) !important; }

    You can try without !important as well but it would make sure that all A tagged elements are targeted :)

    Best regards,
    Yigit

    October 21, 2021 at 2:54 pm #1325890
    fkm

    Hi Yigit,

    thank you for your immediate reply and the quick support – works great.

    I think it´s kind of elegant like that. I luv it. :)

    Best regards,
    fkm

    October 21, 2021 at 3:08 pm #1325894
    Yigit

    Hi,

    You are welcome, fkm, we are always happy to help :)

    Let us know if you have any other questions and enjoy the rest of your day!

    Regards,
    Yigit

  • Author
    Posts
Viewing 17 posts - 1 through 17 (of 17 total)
  • The topic ‘SVG Logo disappeared since the new Enfold update (4.8.6.4)’ is closed to new replies.