0

I did reposition the <header> outside the 'wrap class' class by adding this function in my function.php

/** Reposition header outside main wrap */
remove_action( 'genesis_header', 'genesis_header_markup_open', 5 );
remove_action( 'genesis_header', 'genesis_do_header' );
remove_action( 'genesis_header', 'genesis_header_markup_close', 15 ) ;

add_action( 'genesis_before', 'genesis_header_markup_open', 5 );
add_action( 'genesis_before', 'genesis_do_header' );
add_action( 'genesis_before', 'genesis_header_markup_close', 15 );

/** Reposition header outside main wrap */
remove_action('genesis_after_header','genesis_do_nav');
add_action('genesis_before','genesis_do_nav');

I have my 'header' 980px width with margin:0 auto;

#header {
    border-bottom: 2px solid #1e1e1e;
    min-height: 120px;
    overflow: hidden;
    width: 980px;
    margin:0 auto;
    padding: 0 0 10px 0;
}

When i check inspect element i see this.

 <body>
 <header>Some text here</header>
 </body>

What i want is to add a wrapper to the header with full width

 <body>
 <div class="hwrapper"><header>Some text here</header></div>
 </body>

.hwrapper { width: 100% ; background-color:#000;}

Is there a Hook or a Function that will do that?????

2

This should do it. I can't test it right now.

I used the genesis_header_markup_open() and the genesis_header_markup_open() Genesis functions and renamed them wpse_121660_header_markup_open() and wpse_121660_header_markup_close(). Then called them instead of the Genesis functions and added your new <div> in them.

/** Reposition header outside main wrap */
remove_action( 'genesis_header', 'genesis_header_markup_open', 5 );
remove_action( 'genesis_header', 'genesis_do_header' );
remove_action( 'genesis_header', 'genesis_header_markup_close', 15 ) ;


add_filter( 'genesis_before', 'wpse_121660_header_markup_open', 5 );
add_action( 'genesis_before', 'genesis_do_header' );
add_filter( 'genesis_before', 'wpse_121660_header_markup_close', 15 );

/** Reposition header outside main wrap */
remove_action('genesis_after_header','genesis_do_nav');
add_action('genesis_before','genesis_do_nav');

/**
 * Echo the closing structural markup for the header.
 *
 * @uses genesis_structural_wrap() Maybe add closing .wrap div tag with header context.
 * @uses genesis_markup()          Apply contextual markup.
 */
function wpse_121660_header_markup_close() {

    genesis_structural_wrap( 'header', 'close' );
    genesis_markup( array(
        'html5' => '</header></div>',
        'xhtml' => '</div></div>',
    ) );
}

/**
 * Echo the opening structural markup for the header.
 *
 * @uses genesis_markup()          Apply contextual markup.
 * @uses genesis_structural_wrap() Maybe add opening .wrap div tag with header context.
 */
function wpse_121660_header_markup_open() {

    genesis_markup( array(
        'html5'   => '<div class="hwrapper"><header %s>',
        'xhtml'   => '<div class="hwrapper"><div id="header">',
        'context' => 'site-header',
    ) );

    genesis_structural_wrap( 'header' );
}
| improve this answer | |
  • Hi Charles! I added the code in my functions.. but it completely removed the header. – Jeremi Liwanag Nov 9 '13 at 5:36
  • Like I said, I didn't have a chance to test it. It works now. – Charles Clarkson Nov 10 '13 at 2:26
  • Oh my goodness! You are really my saviour!!!! – Jeremi Liwanag Nov 10 '13 at 13:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.