Creating static header

• 

  jerushasoomar · Member · Aug 26, 2015 at 6:28 pm

  • Copy link
  • Add topic to favorites

  Hi, I would like the header with logo and menu to remain static so that only the content after the header scrolls. How do I set this on my site? I am using Edin theme.

  Jerusha

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

• 

  michaelvandenberg · Member · Aug 28, 2015 at 8:34 am

  • Copy link

  Hi there,

  You’ll need to add some custom CSS code. If you’re not familiar with CSS you can visit this page to read more about it:
  https://en.support.wordpress.com/custom-design/custom-css/

  As for the code, you can use this:

  .site-header {
  	position: fixed;
  	top: 0;
  	width: 100%;
  	z-index: 1;
  }
  
  .site-content {
  	margin-top: 172px;
  }

  This will fix the header (position: fixed) to the top of the screen (top: 0) and give the header a width of 100%. The header will now be hidden behind the content, so we need to give it a z-index of 1 and we’ll need to push the content down by 172px (the height of the header).

  You can enter this code in the customizer, under the CSS tab over here:
  https://datainnovator.wordpress.com/wp-admin/customize.php

  Let me know if it works!

  Good luck!

  Best regards,

  Michael

• 

  jerushasoomar · Member · Aug 28, 2015 at 1:04 pm

  • Copy link

  Great. It works. Thanks!