Thinner and fixed header

• 

  grassoart · Member · Jun 6, 2017 at 4:05 pm

  • Copy link
  • Add topic to favorites

  Hi, I’d like to make my website’s header thinner and fixed (also in the mobile version), but I haven’t figure out how to do that with the CSS customization.

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

• 

  thesacredpath · Member · Jun 7, 2017 at 1:29 am

  • Copy link

  Hi, due to the way the header area (the black band) is designed, we can’t really make it “fixed” as the slide up after scroll is done by Javascript. On making it not as tall, we can do this from 783px and wider, but below that width, it gets messy and the logo would end up having to be made smaller. The following reduces the height of the black header area by 20px. Again, this is the limit with the size of the logo.

  @media screen and (min-width: 783px) {
  .site-header, .site-header.headroom--pinned {
  	max-height: 65px;
  }
  .primary ul > li > a, .menu-items ul > li > a {
  	line-height: 65px;
  	max-height: 65px;
  }
  .site-header .logo {
  	max-height: 65px;
  	line-height: 65px;
  	top: -15px;
  }
  body {
  	padding-top: 65px;
  }
  }

• 

  grassoart · Member · Jun 9, 2017 at 5:17 pm

  • Copy link

  Thanks

• 

  thesacredpath · Member · Jun 9, 2017 at 5:31 pm

  • Copy link

  You are welcome.