Header and Nav Bar Below Header Flush | Widget Align Center

[hohlanhealth]

Here's the website: http://hohlanhealth.org/thesacredembodimentcenter/
1. How do I decrease the gap between the header and the navigation bar below header to make them flush (no gap)?
2. How do I center the Newsletter subscribe button in the Left column widget above header?

[drake]

Try to add at Suffusion Options -> Backend -> Custom Includes -> Custom Styles (you can change slightly that 83px value until nav bar became aligned):

Code: Select all

#header {height:83px;}
#text-2 {text-align:center;}

[hohlanhealth]

Worked perfectly, Thank you Drake!

[popngen]

Try to add at Suffusion Options -> Backend -> Custom Includes -> Custom Styles (you can change slightly that 83px value until nav bar became aligned):

Code: Select all

#header {height:83px;}
#text-2 {text-align:center;}

Drake,

why does the height: 83px work in fixing his padding?

[drake]

Probably at that moment it was a gap between his header and navigation bar. Remember that the height settled for header at Skinning -> Header is a minimum height. A 83px min-height CSS property means that if the header image have 100px with the paddings around the background will take 100px and the navigation bar will be moved with 17px down. But these 17px are just padding, mathematically is a correct behavior but visually you will have a black gap between header images and navigation bar. By setting "height" I overwrite that "min-height" and I force the header to stay in those 83px, so the next element (navigation bar) was moved up, over the black padding.

In his case was necessary 83px, but the same idea can be applied with any value for moving up the navigation bar over the header background.

[popngen]

Probably at that moment it was a gap between his header and navigation bar. Remember that the height settled for header at Skinning -> Header is a minimum height. A 83px min-height CSS property means that if the header image have 100px with the paddings around the background will take 100px and the navigation bar will be moved with 17px down. But these 17px are just padding, mathematically is a correct behavior but visually you will have a black gap between header images and navigation bar. By setting "height" I overwrite that "min-height" and I force the header to stay in those 83px, so the next element (navigation bar) was moved up, over the black padding.

In his case was necessary 83px, but the same idea can be applied with any value for moving up the navigation bar over the header background.

It's a little difficult for me to visually sort this out, but I think I understand! Thank you