Header Logo side by side with navbar

[desmondhume]

Hi there, this is my first post, I tried to look for a solution to this but I couldn't find anything...
I'm trying to put the logo of the website beside the navigation bar; is it possible?
Thank you for your help

[Colin]

Yes it is but you will have to do it using some custom CSS it is not available in the options.

[desmondhume]

Ok, I guessed so, unfortunately I don't know a lot about css, any suggestions?

[Colin]

url of your site and url of your logo then I may be able to give some suggestions.

[desmondhume]

Unfortunately the website is not online yet, but I can show you a screenshot of the header+navbar: http://i43.tinypic.com/112fv3n.png
Obviously, if I'll succed to put the logo beside the navbar I will put the search field above the navbar.

[Colin]

Without it being on line you are making life difficult.

Use this as a starting point

Code: Select all

#nav {padding-left:100px;}


Put the above in your Suffusion Options > Back-end > Custom Includes > Custom Styles

You will have to adjust the 100px to suit the width of your image.

Now in Suffusion Options > Skinning > Header > Height of header image reduce this value by about 20px to get the nav bar to move up adjust the 20px reduction to suit.

You will then have to experiment from there possibly with nav bar colours etc to get exactly what you want.

[desmondhume]

Thank you very much for your help!
Now I succesfully moved the navbar to the right, but I'm still trying to move the logo down, I tried to reduce the height of header image in skinning options but nothing seems to happen..

[Colin]

Reducing the size of the header moves the nav bar up rather than the image down. If you feel so inclined give me temporary backend access to your dev site (by PM) and I will tweak it for you otherwise you will have to do some more experimentation as it isn't clear exactly how you have put the image in the header etc without viewing the site.

[desmondhume]

I uploaded some contents of the website on a free hosting, to show you the issue, here
I put the header image with this tutorial; I guessed I have to tinker with the class blogtitle, but I didn't managed to understand how...

[Colin]

You need to put your header image in the background. I will try to have a look for you later but I will be traveling for the rest of the week and only with my iPad so you may have to wait till Monday for me or hopefully Drake or Sayontan will come up with something beforehand.