any idea what CSS property changes the height size for the black background at the header?
I already move the logo to the top, but NO idea to resize the header background...
thanks..

Comments

lastar84’s picture

lastar84 commented

The applicable style sheet (style.css) is in the "best_responsive" theme folder, and another important style sheet (responsive.css) is in the "css" sub-folder. The responsive.css style sheet has no header settings other than hiding the social icons, but changes may be required if you set your own styles and then want your header layout to behave a certain way in smaller screens.

The div id you're looking for is #header, and its height is not set, so it conforms to the smallest item contained within (plus any margins or padding of that item). In this case, the logo and its parent div -- #site-logo -- are affecting the height of the header. You can change the logo padding, or you can give the header a fixed height.

There is also a speckly, almost invisible transparent background PNG in the header. It repeats. The color of the header is #111 (extremely dark gray, not quite black). You can change those in the #header div also.

For poking around any theme and getting a good idea of how its components are built, I recommend Firebird addon for Firefox. It allows you to hover over any site to see the various divs, spans, tables, etc, and to test tweaks to the CSS from within Firefox.