Center the entire header

  • Resolved dimanche7

    (@dimanche7)


    10 years, 3 months ago

    Hello,

    Here is my site.

    I am trying to make the entire header in the center like this ( If scrolling down a little, you can see it clearly). I wrote this in my child theme’s css:

    .tc-header {
    border-top:none;
    margin-left: auto;
    margin-right: auto;
    max-width: 1200px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.0901961);
}

    but it doesn’t work. I read a thread and followed it to play around with the percentage, but still no luck.

    Is there someone who can kindly tell me what I did wrong?

    Many thanks in advance!

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

  • He wraps the whole header content into another div.
    Add this to your child-theme functions.php :

    // header content wrapped
add_action('__header', 'tc_header_header_start', 0);
function tc_header_header_start(){
    echo '<div class="tc-header-container">';
	return;
}
add_action('__header', 'tc_header_header_end', 40);
function tc_header_header_stop(){
    echo '</div>';
	return;
}

    then get rid of that css, and use this:

    .tc-header-container:before,
.tc-header-container:after {
    display: table;
    content: '';
    line-height: 0;
}
.tc-header-container:after {
    clear: both;
}
.tc-header-container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    background: red; /* for example */
}

    Also if you don’t want header borders at full width don’t use header borders, but add borders to .tc-header-container .
    Also if you want it with the same width as the main wrapper (width of the block which contains the page content, or the boxed slider), then use this code instead:
    in child-theme functions.php:

    // header content wrapped
add_action('__header', 'tc_header_header_start', 0);
function tc_header_header_start(){
    echo '<div class="tc-header-container container">';
	return;
}
add_action('__header', 'tc_header_header_end', 40);
function tc_header_header_stop(){
    echo '</div>';
	return;
}

    css:

    .tc-header-container {
    background: red; /* for example */
}

    Hope this helps

    Thread Starter dimanche7

    (@dimanche7)

    Hello d4z_c0nf,

    It works well. Thank you so much!

    Rocco rocks!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Center the entire header’ is closed to new replies.