-
Posts
-
Hi,
I am loving your theme, and start to get very happy for this frontpage: http://www.tuddal.one. The thing I see is that on scroll, that one moment there are 2 logo’s showing for a little moment: Look screenshot here: https://www.dropbox.com/s/ufhmyvypu2due6g/screenshotkriesi.jpg?dl=0
Is possible to get the second logo under the logo icon away when we scroll? So that the main logo that shows first goes away when the little logo icon appears in the top.
Thanks and kindly regards, Mathildedo you have a svg on your logo ?
you can see here a playground with your logo – but if we had a svg we could set single parts of the logo to not be seen when the header is scrolled.
https://webers-testseite.de/cynthia/tuddal/i only have styled it yet for the wider screens – but when you got the svg this comes next.
Hi, Thanks for answer and example! Looks great! How can I make the 2 logos in svg?
KIindly regards, Mathildewhat was the source for those png’s ?
Do you have any illutrator files of that file – or an eps – sometimes eps are vectorbased too.but if there is no vectorbased source on that – it will work because the letters are under that logo sign.
So when setting the header-scrolled to overflow: hidden it will do the job too:
See example page.Later today I will show you how I have implemented the result. Basically it is the integration of the “logo” into the calculation routine of the shrink script.
We will add your Logo not by having a menu list point in the top-menu but only by placing it via child-theme functions.php and absolute positioning.
And this will be the only logo you need for that.
On your page you beginn the logo height at 300px – and it should end at 66px – so shrink-factor is 4.545
you can see here what we need to obtain that in the avia-snippet-sticky-header.js : https://kriesi.at/support/topic/shrinking-of-header-amount-an-info/#post-1044887
With that shrinkfactor we can calculate the two values to influence in the shrink script. The only the thing to do in this script will be the integration of the new “toplogo” to that calculation. No panic i will send you the edited script-file: https://pastebin.com/gi40An1c
Download-link: https://pastebin.com/dl/gi40An1cBut for now enough – detailed info later! IF – you are interested in that solution
Hi, thanks a lot, sorry for the delay, I have been very busy this weekend and been traveling. I will have a closer look at this, and come back to you! I do have the logo in vector.
KIndly regards, MathildeThe above is not all you need – but an overview what is the clou on it.
There’s a lot to do. Some in the child-theme functions.php and then in quick css. Whereby you have to find out what needs to be removed from the one set so far.
I just wait and see if there is still interest in the solutions. Unfortunately it was more often the case that I wrote some detailed descriptions with pictures and then suddenly another solution, e.g. a different header constellation, was used.Hi again,
So thankful for all your help. I didn’t know that this was so complicated, regarding removing the logo on scroll like that / changing the coding of it all. My client very much wants it like I have made it now, it’s just the double logo thing that one second while scrolling that’s the problem. Is there another easier way to hide it with css?
I understand that it’s a waste of time when you help people and then they choose another solution. So I respect very much your time.
Look private content for logo in vector.
Thanks and kindly regards, Mathildeno private content for me – because i’m participant as you are.
Please excuse the delayed reaction, sometimes I also have to work and satisfy my own customers.so again my question : my testpage ( https://webers-testseite.de/cynthia/tuddal/ )
is it the way it should work? Or does your customer have other demands?
See also now the responsive case and behavior of the logo and the other heading linksHi mofix,
The screenshot or mockup is not loading on my end. Please update it.
Best regards,
VictoriaHi Guenni007,
My clients likes this very much: http://www.tuddal.one But the only thing thats the problem is what’s happening that one second on scroll that we se 2 logos. But the possition and looks of it all is how they want it now. Isn’t there any easier way to just code away/hide the black doubleheader with logo that appears on scroll?
Here’s the vector logo: Here it is: https://www.dropbox.com/s/aptgyshh13g3cdg/Tuddal_logo2020ANNO_hvit_ny.ai?dl=0Hi Victoria, It’s a vector logo for Guenni007, it’s white so it doesn’t show on preview.
Thanks a lot and kindly regards, Mathilde
Hi,
Thank you for the update.
You might be able to hide the logo based on the scroll position of the window. Something like this:
$(window).scroll(function (event) { var scroll = $(window).scrollTop(); // if scroll less than 50 show logo else hide it });Or try this css code to hide the logo by default and only display it when the av_header_transparency class name exists in the header.
.logo { display: none; } .av_header_transparency .logo { display: block; }The screenshot above doesn’t display because it’s an AI file. Please use jpg or png for the screenshot.
Best regards,
Ismael
- The topic ‘2 logo's showing on scroll’ is closed to new replies.