Logo Padding Issue and Sizing

Hi,

I have a logo that is currently the size of 337 × 37. I’m currently using the fixed header so when you scroll down the header shrinks down in size (which is great!).

Right now on the home page, the logo shows that it is sitting near the top of the header so there is lots of blank space below it. However, if I go to a page with lots of text and I scroll down the page, the header shrinks and the logo looks perfect.

I’ve tried to add padding-top to the logo of 25px and it looks great when I don’t scroll. The minute I scroll the down the page, the logo shinks to a size that is not legible.

The perfect solution for me would to have the logo sit so that it is middle aligned with the menu and when I do have to scroll the logo maintains its existing size.

I’ve combed the forums and it seems some of the solutions required editing of JS code. I”m not a big fan of this because let’s say an update happens and I totally forget about the modification then I’m kinda screwed. Can this be done striclty with CSS only?

Thanks and looking forward to your reply.

sl

• This topic was modified 10 years, 6 months ago by slui. Reason: spelling mistake