Changing Header Height

  • chineloogbonna

    (@chineloogbonna)


    10 years, 8 months ago

    Hello…can anyone assist me with changing my header height? I have created a child theme, where the height works ok if the header is 230-240px, but when I try and change it to 180px it there is a huge gap between my header image and nav bar. The blog site is http://www.toriberry.com/blog.

    Not sure if this is helpful but these are the codes I have updated on my child theme that pertain too header and content.

    Any help would be appreciated.Thanks!

    .site {
    background-image: url(http://www.toriberry.com/wp-content/uploads/2015/07/content_background.jpg);
    background-repeat: repeat;
    margin: 0 auto;
    width: 1050px;
    margin-top: 10px;
    }
    .site-header .home-link {
    color: #141412;
    display: block;
    margin: 0 auto;
    width: 1050px;
    max-height: 180px;
    text-decoration: none;
    background-image: url(http://www.toriberry.com/wp-content/uploads/2015/07/wp_sub_header.jpg);
    background-repeat: no-repeat;
    border-top-width: medium;
    border-right-width: medium;
    border-left-width: medium;
    border-top-style: solid;
    border-right-style: solid;
    border-left-style: solid;
    border-top-color: #632142;
    border-right-color: #632142;
    border-left-color: #632142;
    }
    .site-header .search-field:focus {
    cursor: text;
    outline: 0;
    width: 180px;
    }

    .comment-respond {
    background-image: url(http://www.toriberry.com/wp-content/uploads/2015/07/content_background.jpg);
    background-repeat: repeat;
    padding: 30px 0;
    }

Viewing 5 replies - 1 through 5 (of 5 total)
  • Bojan Radonic – WPMU DEV Support

    (@wpmudev-support4)

    10 years, 8 months ago

    Hey there chineloogbonna,

    I’ve checked your site and the reason this happens is because there is minimum height defined on the home link in your header which is 230px.

    You should be able to override this with by adding the following at the bottom of your child theme style.css:

    .site-header .home-link {
    min-height: 180px;
}

    This should be the result http://screencast.com/t/Jh9zplG6x5YA.

    Hope this helps 🙂

    Cheers,
    Bojan

    Thread Starter chineloogbonna

    (@chineloogbonna)

    10 years, 8 months ago

    Thank you so much Bojan, that fixed it!! 🙂

    Bojan Radonic – WPMU DEV Support

    (@wpmudev-support4)

    10 years, 8 months ago

    Glad I could help 🙂

    Cheers,
    Bojan

    Thread Starter chineloogbonna

    (@chineloogbonna)

    10 years, 8 months ago

    Hi Bojan
    Wondering if you could help me with another issue? I am trying change the padding between the header and content. I’ve tried changing everything I thought would do it, but nothing seems to be working? Aslo, how do I remove the “powered by wordpress” at the bottom?

    Bojan Radonic – WPMU DEV Support

    (@wpmudev-support4)

    10 years, 8 months ago

    Hey again chineloogbonna,

    Generally for new questions you’d want to open a new thread. With that being said I’ve checked your site and that padding on your content area is most likely being added by a script so we’ll have to use important declaration to override that one, so please try adding the following:

    .content {
    padding-top: 0 !important;
}

    Normally I wouldn’t suggest the use of the !important declaration. However, it can sometimes be a necessary evil when over-writing existing styles. You can find more info on the use of important declaration here:

    https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#The_!important_exception

    As for powered by wordpress I really can’t see that in your footer so I’m not sure what you’re referring to, did you manage to remove it or am I missing something?

    Best regards,
    Bojan

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

The topic ‘Changing Header Height’ is closed to new replies.