Moving page header outside main wrap

1

Hi there,

I’m trying to give the page header div (<div class="page-header">) a full page width and the best solution seems to move it outside the main wrap (<div class="wrap container" role="document">) and put it in a new div (<div class="container-fluid">).

Any ideas how I could achieve this ?

3

Your best bet is to create a custom base-page-full-width-header.php and place the call to <?php get_template_part('templates/page', 'header'); ?> before the div.wrap.container.

4

Thank you @cfx, I’ve removed <?php get_template_part('templates/page', 'header'); ?> from page.php and placed it just before the div.wrap.container in base.php. I haven’t created a new custom file.

It’s working fine but dunno if this is safe.

5

It’s 100% safe. You don’t need to create a custom base file if you plan to use this structure for all of your pages.

If you do end up with any unexpected results then you may want to wrap your get_template_part() call in a quick conditional, something like

if(is_page()) {
  get_template_part('templates/page', 'header');
}

and adjust that conditional according to your needs.

1 Like
6

Got it. Now I’m wondering which div should I wrap this with for semantic html. I thought of:

<header class="container-fluid">
   <?php if(is_page()) { get_template_part('templates/page', 'header'); } ?>
</header>

What do you think ?

7

it would be better to add the header element in the conditional:

<?php if(is_page()) { ?>
  <header class="container-fluid">
    <?php get_template_part('templates/page', 'header'); ?>
  </header>
<php } ?>

because if the condition is false (if it is not a page) then you will be left with an empty header element in your html. or you could put the header element inside the page-header.php template.

8

Thanks @slobich, so is it okay to use two <header> divs ? The navbar is also wrapped with <header>.

9

generally speaking yes. you can have more than one header element. but using it has to be semantic. i.e. roots has a header element in the content-single.php template. i suggest you check this article on html5 doctor about the header element: http://html5doctor.com/the-header-element/