Inline Box Problem with whitespace

[ginaruiz]

Hi. I love the theme but am having problems with it. I believe the problem is related to inline box elements. When I put my logo in, it shifted the nav menu to the line below which looks awful. I would love it, if it went back on top and the stick menu shifted over to the left a little but cannot figure out how to fix it. Inspecting the element of the logo – there seems to be some whitespace that is shifting things but I can’t remove or change the size of that dead space.

http://ginaruiz.com

please help.

[satori]

Dear Gina,

first of all, thank you for the purchase!

Let me first explain why this is happening (it is not a bug), and then we’ll figure out what we can do in this particular case to suit your needs. By design Haiku’s header is centered around the stick menu, with the logo on the left and the secondary menu on the right and gravitating towards the central stick menu. In other words, one can say that the meader has a center symmetry. The right menu also becomes automatically centered vertically according to the height of the logo, in order for the entire block to look more balanced. Since the logo you are using is quite large and the right menu is still centering vertically based on the logo height, the right menu moves down to fit the vertical level of the middle of the logo. ..I hope this was understandable :) The arrangement I’ve described above is not a random whim but rather a result of testing several alternative approaches to implementing the header layout I’ve envisaged for the theme.

By the way, I can also see that you’ve altered the code slightly, and the new declaration you’ve inserted is not correct (line 232 of “style.css”, the #logo element has a “text-align” property set to “float left”; if you want the logo to align left, that property should simply be “left”) – and this is why the logo exhibits the default behaviour and aligns to the left, leaving a white space between it and the stick menu.

Now to the solution part. Let me first describe your desired state of the header to make sure we’re on the same page: as far as I understood, you want the logo to align left relative to the main white content box, the sticks to move to the left just next to the logo, and the right menu to stay on top of the header area, i.e. not go down vertically. This can be done, given that I will be provided access to your backend. However, a much simpler solution would be to upload a new logo, making it smaller, both vertically and horizontally (Haiku was envisaged as a “small-minimalist-logo” theme :) You can see an example of the logo in the theme’s demo. In case this is not an option and you do not want to resize or redesign the logo, please let me know if I got your desired layout correctly, and send me your admin credentials to support@satoristudio.net (no disclosure guaranteed) to make the desired changes.

Sincerely,
Andrew / Satori Studio

[satori]

Hey Gina,

I’ve made some changes to the website, as per your requests. Please take a look and let me know if this is what you wished to arrive at.

Best,
Andrew / Satori Studio

[Author]

Posts