Barnsbury Header Height

• 

  janellbag · Member · May 27, 2021 at 11:25 am

  • Copy link
  • Add topic to favorites

  Hi! My header height is not the same on the home page vs. the other pages. I’d like to make it smaller for the other pages to make it the same as in the home page. I’ve been able to remove page titles and reduce the header margin with below CSS:

  .page .entry-title {
  display: none;
  }

  .site-main>article>.entry-header, .site-main>.page-header, .site-main>.not-found>.page-header {
  margin-top: 0;
  }

  What can I add to further reduce the header height?

  The blog I need help with is: (visible only to logged in users)

• 

  deancroyal · Staff · May 27, 2021 at 7:59 pm

  • Copy link

  Hi there – I would like to clarify what you are looking for before attempting a solution.

  If I’m reading correctly, you have successfully reduced the height of the site header on the home page. You would now like our help reducing the height of the header on all other pages, to match the home page header height.

  Is that right?

• 

  maksimurasov · Member · May 28, 2021 at 7:02 am

  • Copy link

  Hi @janellbag,

  As I understand, you need to reduce the below shown gap on all pages?
  
  
  
  That highlighted box is called Title.
  Seems that your website Home page has this Title container hidden (in Customizer > Homepage Settings), while the other pages show it.

  The code that you have provided above eliminates the text in this Title container and reduces top margin only (above the text “Home” in my example)
  So if you need to totally get rid of that Title container on all pages and posts, you can delete all the code you have provided and change it to this one:

  /*Hides Title box on all pages and posts*/
  .page .entry-header {
  display: none;
  }

  Hope that helps, please feel free to ask if any.

• 

  janellbag · Member · Jun 1, 2021 at 2:21 pm

  • Copy link

  Thanks for clarifying @deancroyal, and for the suggestion @maksimurasov. Unfortunately, I tried to replace with your suggested code and it’s still the same.

  I’ve uploaded a snip of how the homepage looks like vs. a page here: https://drive.google.com/file/d/1sRGGySZqdaYQFo_0TGCW5Od_M7d6U64B/view?usp=sharing It can be seen that while the logo and menus are placed the same, the home page contents start right after while in the pages, there’s a gap before the content.

  Let me know if you need further details.

• 

  staff-blorbo · Staff · Jun 1, 2021 at 5:34 pm

  • Copy link

  Try adding specifically this too:

  .site-main>article>* {
  margin-top: 0px !important;
  }

• 

  janellbag · Member · Jun 1, 2021 at 10:24 pm

  • Copy link

  Thanks, staff-blorbo! That worked. :D

  Thank you all for the help!