Full width header and no border from top

  • Hello, I’m trying to make my header full width and no padding on top. My site is located at https://collectivelychristine.com
    I’m using a child theme and I’m trying to edit that.
    My style CSS for the header is:
    /* # Site Header
    —————————————————————————————————- */

    .site-header {
    border-top: 5px solid #c5d8de;
    min-height: 150px;
    }

    .site-header .wrap {
    padding: 15px 0;

    and my functions.php is:
    //* Add support for custom header
    add_theme_support( ‘custom-header’, array(
    ‘width’ => 900,
    ‘height’ => 420,
    ‘header-selector’ => ‘.site-title a’,
    ‘header-text’ => false,
    ) );

    That all I see for custom header. I’m going to make my logo different and I want the top of the logo to be flush with the top of the page.

    Thanks

Viewing 1 replies (of 1 total)

  • If you right click your header and select your browsers Inspect Element tool, you can inspect your sites structure and view the CSS code that is being applied to any element.

    To allow your header to be full-width, and to remove the top-padding, you can use this:

    .site-header .wrap {
    padding: 0 30px 30px;
    max-width: none;
}

    Your logo image dimensions are also being controlled via this code:

    .header-image .site-title > a {
    background-size: 450px 210px !important;
    height: 210px;
}

    You need to adjust the 450px & 210px dimensions to suit your needs.

    Hope this helps.

Viewing 1 replies (of 1 total)
  • The topic ‘Full width header and no border from top’ is closed to new replies.