Sidebar over header (Twitter style)
-
hi,
is it possible to pull default sidebar higher to the middle of the header (over header), like it is on twitter homepage?
thanks.
-
@Janis, here we go…
To widgetize your header, register a new sidebar in your child theme’s functions.php file, like so:
`register_sidebars( 1,
array(
‘name’ => ‘custom-header’,
‘id’ => ‘custom-header’,
‘before_widget’ => ‘‘,
‘before_title’ => ‘
‘,
‘after_title’ => ‘‘
)
);`Next, add the new widget area to your child theme’s header.php file, just below the line where you see `
`, like so:`<?php if(is_active_sidebar("custom-header"))
>`
See where the sidebar above is wrapped in a div called “custom-head”? Style that div by adding a ruleset to your child theme’s style.css file, like so (adjust to taste):
`div.custom-head {
width:100%;
height:100%;
border:1px solid #000;
color:#555;
}`Now make your regular sidebar go away by adding the following to your child theme’s style.css:
`div#sidebar {
display:none;
}`Finally, adjust the margin of the content.padder div by adding the following to your child theme’s style.css (if your sidebar is on the left, adjust accordingly):
`div#content .padder {
margin-right:0;
}`Now go to your dashboard and add widgets to your new widget area called… custom-header.
This works in my local dev install. Hope it helps ya!
Just thought of a different strategy… come to think of it, this may be what you’ve been asking for from the beginning
If you want to keep your existing sidebar, but extend IT to the top of the page, and make your header narrower, that can be done purely through css. Here’s how:Make sure #container and #header divs are both position:relative;
If your sidebar is on the right, add float:left; to #header div (if sidebar is on the left, add float:right; to #header div)
Add z-index:1; to #header (makes it sit on top of the #content div)
Add margin-top:Xpx; to #content (set to whatever pixel value gets your content to sit squarely below your header)Done
You must be logged in to reply to this topic.
