Header Logo side by side with navbar

[drake]

You can see this kind of configuration at work, at one of my sites: http://www.hidroizolez.ro
What you have to do?
- at Other Graphical Elements -> Header, choose "Header is inside the main wrapper" at the first option and let Blog Title/Header Alignment to the left;
- Other Graphical Elements -> Navigation Bar Below Header choose "Navigation bar and its contents are aligned with your main page" at the second option and put Dropdown Menu Position to the left too;
- now go to Suffusion Options -> Backend -> Custom Includes -> Custom Styles and add this code:

Code: Select all

#nav.tab {
width:750px;
float:left;
/* next lines is just for round corners of navigation bar, you can skip it */
-moz-border-radius: 7px;
-khtml-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
}

Probably you need to adjust the value of 750px to match with your header image (width of header + width of navigation bar need to not exceed the width of wrapper).
Also, if you wish to made this changes you need to go at Skinning -> Navigation Bar Below Header and decrease the size of fonts used here - with size that you have choosed your bar is already filled by items at full width.
- Go now to Skinning -> Header and increase/decrease the last value (Height of Header Image) until your menu came inline with the header image.

If you need to move your menu up, let's say at the middle of image, you can add between the curly brackets in the code above: margin-top:-50px; . Also, adjust that -50px to suit.

[desmondhume]

Thank you very much, it did worked!
But now the navbar ends before the end of the main wrapper, as you can see in the test website...

[drake]

You have chosed a tabbed navigation bar at Other Graphical Elements -> Navigation Bar Below Header -> Look and feel (or you let Theme Default there), so - where is no menu tab, isn't navigation bar. If you choose there to have "Show menu items as a continuous list" the blue bar will fill the wrapper.
But then, in the code above, you need to address #nav.continuous instead of #nav.tab.

[desmondhume]

I changed everything as you said but nothing seems to happen; I tried also to use theme default as menu item style, and in this way the navbar fills the whole wrapper, but (obviously?) it messes everything else up...

[drake]

As I said, you need to adjust the value of 750px (I took that from my site).
In Firebug I can see that in your case is needed width:848px;. (if don't fit, decrease the value pixel by pixel, until it fit perfectly)

[desmondhume]

Thank you very much, everything solved now