Help removing the space between Header & Navigation Bar in templates

  • Unknown's avatar
    radevious · Member ·

    I’m extremely new to WordPress.com, and websites in general, and a few weeks ago I was having troubles with removing the blank space that appeared in-between the Header & Gutenberg Navigation Bar, which was really bugging me.

    Eventually, after a bit of searching, I found this code to paste into the Additional CSS section, that successfully removed the space in-between:

    .page .entry-content, .page .entry-header .inner-wrap, .page:not(.inspiro-front-page) .entry-footer, .single .entry-content, .single .entry-footer, .single .entry-header .inner-wrap {

    margin: 0em auto; /* default value is 2.8125em auto */

    }

    Fast-forward to now, and it all seemed to be working fine, until I started making posts for my blog. My homepage has the Header in the template, and the Navigation Bar on the actual page, unlike with my Posts.

    I have both the Header AND Navigation Bar in the “Single Posts” template, to spare me from having to manually insert a Navigation Bar every single time I make a post. Issue is, the gap appears to still show on my Single Posts, and anywhere else where the Navigation Bar & Header are BOTH in a template.

    I have zero clue about how CSS works, as I’m new to all of this, and was just wondering if anyone had a way to fix the code, or something else, to make it so the gap isn’t there on both my Pages, with the Header & Navigation bar separate AND my Posts, etcetera, which have both in a template, instead of only one. Many thanks!

  • Unknown's avatar
    israelmartinsrt · Member ·

    Hi @radevious, I know how confusing and frustrating it is when you add a fix for a particular issue only to see it occur later on. I’m here to help you sort that out.

    From checking the CSS snippet you added to your site, the CSS might be targeting elements that are either not present or have more specific targeting styling (which would override your snippet) applied to them on the post page. Fixing that would require checking the CSS selectors on the post page and adding CSS selectors and style properties that would override the default theme styles. See how that can quickly start getting messy even with expert knowledge of CSS?

    An alternative (and more stable) way to adjust the spacing between the header and the navigation bar would be to use the spacing settings in the Site Editor.

    See this demo of how to adjust the spacing around the header in the Site Editor: https://share.zight.com/Kou2gER0

    Here are some guides to help you get started with spacing adjustments:

    I hope that’s helpful, and I’m happy to help if you have more questions or need more assistance.

  • The topic ‘Help removing the space between Header & Navigation Bar in templates’ is closed to new replies.