Remove gap between Header and Nav Bar in Twenty Seventeen

  • Author
    Posts
  • #3261934

    critfall
    Member

    I’m having a problem similar to (3) in this post: https://en.forums.wordpress.com/topic/twenty-seventeen-header-image-position-in-pages-and-posts/

    On my posts and pages, there’s a gap between the header image and the navigation bar. I fixed this problem on my front page with this code:

    .navigation-top {
    border-top: none;
    }

    but the problem persists on posts and other pages.

    I’m a novice at CSS, so any help/explanation would be really appreciated. Thanks!

    The blog I need help with is critfall.com.

    #3261975

    Something like this should help:

    .wp-custom-header img { padding-bottom: 0px; }

    It looks like the actual image in the header has a 1px border on the bottom

    Let me know if that helps

    #3261995

    mrsnlchauhan
    Member

    Hi there,
    You might want to change a line of code in your twenty sixteen theme style file at line number 3362 to have following:

    {line-height: 1.6;}

    instead of what you have right now there ie; {line-height: 1.5;}

    Hope this helps.

    Best
    Sunil Chauhan

    #3261996

    mrsnlchauhan
    Member

    Hi,
    I just revisited the problem again and found another solution which might work better:

    Please change the line of code at line no 3289 in your style sheet to have following:

    .site-branding { padding: 0; }

    Hope this helps

    Best
    Sunil Chauhan

    #3262038

    torres126
    Member

    @critfall Your website uses the self-hosted version of WordPress rather than WordPress.com, which is what this forum is designed to help with. Note the difference here: https://en.support.wordpress.com/com-vs-org/

    In future, it’s best to find help here: https://wordpress.org/support/theme/twentyseventeen/

    That being said, I just wanted to clarify @mrsnlchauhan‘s suggestion to directly edit your theme’s CSS. I would recommend against this, because that CSS would then be removed every time you update the theme. Instead, it’s better to use the Customizer to insert CSS: https://codex.wordpress.org/CSS#Custom_CSS_in_WordPress

    Thanks! :)

    #3262785

    critfall
    Member

    @phillipburger: That didn’t seem to work. I double checked the header image, and I’m not seeing the border you mentioned.

    @mrsnlchauhan: Thank you, I will keep these solutions in mind.

    @torres126: Sorry about that! I didn’t realize I was on the wordpress.com forum. I’ll repost on the proper forum. Thank you!

    #3263196

    mrsnlchauhan
    Member

    @torres126 : Yes, you are right about that. Thanks for the suggestion and improving on my proposition. I just forgot to mention in a haste to answer that the stylesheet overrides must be done in child theme or via customizer so that they are intact even when the theme is updated.

    @critfall please take a note of suggestion posted by @torres126

    Thanks everyone.

The topic ‘Remove gap between Header and Nav Bar in Twenty Seventeen’ is closed to new replies.