Reduce height header in mobile

• 

  grassoart · Member · Nov 1, 2016 at 4:18 pm

  • Copy link
  • Add topic to favorites

  Hi, I would like to reduce the header height in the mobile version. I found out how to reduce it at the bottom by changing the padding value, but I can’t do the same at the top.

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

• 

  thesacredpath · Member · Nov 1, 2016 at 7:38 pm

  • Copy link

  Are you talking about the slideshow on the top of your home page?

• 

  grassoart · Member · Nov 2, 2016 at 5:27 am

  • Copy link

  No, I’m talking about the header with my logo and the menu. The slideshow is already fine to me

• 

  thesacredpath · Member · Nov 2, 2016 at 5:01 pm

  • Copy link

  Thanks for the clarification. You have this rule in your custom CSS. Adjust the bottom padding as desired.

  .site-header {
  	background:#111;
  	border-bottom:0;
  	padding-bottom:1.5em;
  	width:100%
  }

  On the bottom of the toggle and logo, there is 1.5em of bottom margin. Add this and adjust as desired.

  .site-branding, .menu-toggle {
  	margin-top: 1.5em;
  }

• 

  grassoart · Member · Nov 2, 2016 at 9:04 pm

  • Copy link

  Exactly what I needed, thank you again!

• 

  grassoart · Member · Nov 2, 2016 at 10:18 pm

  • Copy link

  One more question: how can I make it fixed also in mobile version? Cause I enabled the option but it works only on the desktop version…

• 

  thesacredpath · Member · Nov 3, 2016 at 6:48 pm

  • Copy link

  Give this a try and see what you think.

  @media screen and (max-width: 895px) {
  	.site-header {
  		position: fixed;
  		z-index: 9999;
  	}
  	.home .site-content {
  		padding-top: 10% !important;
  	}
  }

• 

  grassoart · Member · Nov 3, 2016 at 8:29 pm

  • Copy link

  Thank you!! I changed the 10% to 4em in the padding and now it’s perfect.

• 

  thesacredpath · Member · Nov 7, 2016 at 3:52 pm

  • Copy link

  Hooray and you are welcome!