Hi!
Does anyone know how to resize an image logo with the new header block using custom code?
We have the option to pick between S, M, and L but none of them are making my logo large enough.
Thank you in advance 
-Nathaniel
The following css should do the trick.
To be tested with different size (1.3 to be changed if necessary)
Code to be inserted in the header custom code, page or app level.
If the logo is inside the sidebar:
<style>
#sidebar-root img {
transform: scale(1.3) !important;
}
</style>
If the logo is inside the topbar:
<style>
#topbar-root img {
transform: scale(1.3) !important;
}
</style>
3 Likes
Amazing, thank you!!
Hi Nathan, do you mind sharing a image of what size you want to achieve for us to consider? A screenshot will help
I’ll jump in! I’d say 50x50 would be great. Here’s a screenshot of my current (right) and with the new nav (left) side by side.
Unfortunately this didn’t work for me. I’ve added to the app header and tried adjusting the scale but nothing happened. I’ve tried searching for topbar-root in the inspector but not seeing it there. Should it be?
Hi, can you add !important after scale(1.3) and before ;
No dice.
I don’t swipe this for anything right? #sidebar-root
I can’t debug anything without checking a url unfortunately.
Though if your logo is inside the top bar (a new horizontal header) it’s topbar not sidebar.
Got it – I haven’t published yet as I’m just going through all the pages with the conversion to ensure no bugs.
And yes – I have as top bar but was flipping between the two to see if it worked with either. I’ll continue to muck around with it and see if I can figure it out! Has it worked for anyone else?
Update - so I don’t know what changed but it seems to be working now in preview mode. Thanks @matthieu_chateau !
1 Like
In this case, it’s possible that the issue was caused by your browser cache being full. This can happen from time to time. The changes made in the app might not appear in the browser, even though they are actually there.
1 Like
Hello again! So the code seems to be resizing the avatar as well. Is there a way to isolate just the logo?
This one should do the trick
<style>
#topbar-root a img {
transform: scale(1.3) !important;
}
</style>
beaut – thank you!