Header width same as container

Resolved Manu-PB
(@manu-pb)

9 years, 11 months ago
By default, the header width is “full width”.
I want to reduce it to the page (contanier) width, and I started using CSS : http://wordpress.org/support/topic/get-header-the-same-size-that-container?replies=2
But I wanted to keep the header background spread over the full screen (same as footer), so I added a div tc-header-header in header.php:
```
<header class="<?php echo tc__f('tc_header_classes', 'tc-header clearfix row-fluid') ?>" role="banner">
<div class="tc-header-header">
<?php do_action( '__header' );?>
</div>
</header>
```
With the following CSS:
```
@media (min-width:1200px){
	.tc-header-header{width:1200px;margin:auto}
}
@media (min-width:940px) and (max-width:1199px){
	.tc-header-header{width:940px;margin:auto}
}
```
Is there some way (snippet) to add this div without modifying the header.php file?
Thanks for help,
Site : http://www.creermonsitepro.fr

Viewing 3 replies - 1 through 3 (of 3 total)

Rocco Aliberti
(@d4z_c0nf)

9 years, 11 months ago
You can read, in header.php:
```
//the '__header' hook is used by (ordered by priorities) : TC_header_main::$instance->tc_logo_title_display(), TC_header_main::$instance->tc_tagline_display(), TC_header_main::$instance->tc_navbar_display(
```
Priorities are:
logo 10
tagline 20
navbar 30

You might do:
```
add_action('__header', 'tc_header_header_start', 0);
function tc_header_header_start(){
    return '<div class="tc-header-header">';
}
add_action('__header', 'tc_header_header_stop', 40);
function tc_header_header_stop(){
    return '</div>';
}
```
Or something of the sort.

Hope this helps.
Thread Starter Manu-PB
(@manu-pb)

9 years, 11 months ago
Many thanks d4z,
Was not far, indeed :
```
// header sized to container
add_action('__header', 'tc_header_header_start', 0);
function tc_header_header_start(){
    echo '<div class="tc-header-header">';
	return;
}
add_action('__header', 'tc_header_header_stop', 40);
function tc_header_header_stop(){
    echo '</div>';
	return;
}
```
Rocco Aliberti
(@d4z_c0nf)

9 years, 11 months ago

Oh yes Manu, sorry for the error (return instead of echo) 😀
Also “end” instead of “stop” would be better.
Thanks for reporting the correct version, people can find it useful.

p.s.
anyway after that echo, the return isn’t really needed.

p.p.s.
Forgot to say that if you want that div acts as the others “cointaner” elements, you just need to add the class “container” to it, so:
<div class="tc-header-header container">

Then you’ll don’t need additional css.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Header width same as container’ is closed to new replies.

Tags