12 replies · opened Jul 2, 2019
Hi,
Though I set a different image source for data-mobile-logo and data-sticky-logo the appearance is not working as expected.
The smaller logo for mobile seems to be enlarged and covers elements left and right.
Do you have an idea?
Thank you for your answer!
aixtreme
live version link:
https://www.aachen-acoustics-colloquium.com/relaunch/temp.html
Problem appears e.g in windows chrome dev set on mobile resolution and/or my cellphone LG G5
Hello,
The data-mobile-logo Appears to be working fine but since the Default Height of the Logo Image has been set at 100px, it is not displayed as expected. Simply consider adding the following CSS Code:
.device-xs #logo img {
height: 60px;
margin-top: 20px;
margin-bottom: 20px;
}This should definitely fix the issue. Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
Hi,
This definitely fix this issue but produce a new problem when scrolling.
Though I've added the data-sticky-logo attribut (to the same image file) the logo is not shrinking and keeps its margin...
:-(
Please check my updated live url.
Thank you for your answer!
aixtreme
"Default Height of the Logo Image has been set at 100px"
I did not consciously set the height of the logo to 100 px, the default settings should still be effective here.
In addition, in desktop view, the logo now switch to the low resolution image while scrolling and becomes blurred.
Hello,
Apologies about the Inconveniences caused!
Consider using the following CSS Code:
.device-xs #header:not(sticky-responsive-menu) #logo img {
height: 60px;
margin-top: 20px;
margin-bottom: 20px;
}In addition, in desktop view, the logo now switch to the low resolution image while scrolling and becomes blurred.
Refreshing the Page should fix this issue.
I did not consciously set the height of the logo to 100 px, the default settings should still be effective here.
The Default Height of 100px has been added in the style.css by default.
This should definitely fix the issue. Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
Sorry, but this is not working for me or I did not understand your approach completely.
Not xs viewports are working as expected now, but while switching to xs viewport and scrolling, the logo keeps its margin-top (see attached screenshot).
Variations of margin-top in both of your suggested CSS code (set to 0px or using only your last CSS code) are not working too.
https://www.aachen-acoustics-colloquium.com/relaunch/temp2.html
https://www.aachen-acoustics-colloquium.com/relaunch/temp3.html
https://www.aachen-acoustics-colloquium.com/relaunch/temp4.html
https://www.aachen-acoustics-colloquium.com/relaunch/temp5.html
Got the feeling that there is no switch while starting to scroll.
Is "not(sticky-responsive-menu)" correct named (please see respective screenshot)
Thanks for your answer!
aixtreme
Hello,
Please delete the CSS Codes we had provided you with earlier and use the following CSS Code:
.device-xs #header:not(.sticky-responsive-menu) #logo img {
height: 60px;
margin-top: 20px;
margin-bottom: 20px;
}If you are not using a differently styled logo and just planning to change the sizing of the Logo, then it is not recommended to use the data-sticky-logo and data-mobile-logo Attributes. Consider checking this Template: http://themes.semicolonweb.com/html/canvas/logo-changer.html .
This should fix your issues. Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
Hi,
Unfortunately this is not fixing the margin-top problem while scrolling.
(see https://www.aachen-acoustics-colloquium.com/relaunch/temp.html updated according to your recommendation)
If I add the following CSS code:
.device-xs #header.responsive-sticky-header #logo img {
height: 60px;
margin-top: 0px;
margin-bottom: 20px;
}the margin-top problem while scrolling is fixed but there is no smooth logo animation as usual but only a hard jump to the top position.
Not really professional :-(
https://www.aachen-acoustics-colloquium.com/relaunch/temp2.html
Thanks for your answer
aixtreme
Hello,
Thanks for your Continued Patience on this. Delete all the previous CSS Codes and use the following Code:
#logo img {
-webkit-transition: height .4s ease, opacity .3s ease, margin .4s ease;
-o-transition: height .4s ease, opacity .3s ease, margin .4s ease;
transition: height .4s ease, opacity .3s ease, margin .4s ease;
}
.device-xs #header:not(.responsive-sticky-header) #logo img {
height: 60px;
margin-top: 20px;
margin-bottom: 20px;
}This should fix all the issues. Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
Yeah!
This is working as intended.
Thank you!
Hello,
Really Glad that your issues were resolved.
Do let us know if we can help you with anything else or if you find any further issues with Canvas.
Have the same question, or something new?
Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.
Reply on the dashboard