Static Header

• 

  stevetarbuck · Member · Jul 4, 2016 at 5:45 am

  • Copy link
  • Add topic to favorites

  I am using “The Shoreditch” theme and I would like my Header to remain static, hence when a user scrolls the text goes behind the header.

  Can anyone offer advice using Custom CSS?

  Best regards
  Steve

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

• 

  hallluke · Member · Jul 4, 2016 at 6:51 am

  • Copy link

  Here’s some code to try, I’ve set it to affect the desktop view of your site only as on tablets and mobiles the reduced amount of screen available means that your viewers will probably not want the header following them down the page taking up half the space. Let me know how it works out.

  @media screen and (min-width: 896px) {
    #page {
      position: relative;
      padding-top: 175px;
    }
    #masthead {
      position: fixed;
      top:0;
      border-bottom: 1px solid #3A62B2;
      z-index: 20;
    }
  }

• 

  stevetarbuck · Member · Jul 4, 2016 at 7:12 am

  • Copy link

  Thanks hallluke, I try it later and update you on the outcome

• 

  stevetarbuck · Member · Jul 8, 2016 at 4:59 am

  • Copy link

  Hey, hallluke this worked perfectly, thanks. Just any other question if I may, below the header menu is an imagine, is there a way to incorporate that remaining static too with some clever coding?

• 

  hallluke · Member · Jul 8, 2016 at 6:34 am

  • Copy link

  Try swapping it for this (you might need to test it still works on other pages though) although it does mean you’re taking up a lot of space permanently as the picture is quite tall. I prefer the first version!

  @media screen and (min-width: 896px) {
  	#page {
  		position:relative;
  		padding-top:270px
  	}
  	#masthead {
  		position:fixed;
  		top:0;
  		z-index:20
  	}
  	.header-image {
  		position:fixed;
  		top:175px;
  		z-index:20
  	}
  }

• 

  stevetarbuck · Member · Jul 8, 2016 at 8:28 am

  • Copy link

  Hey, it works perfectly, and I’m inclined to agree with you in liking the first version. Might consider changing the header and see what effect that has on either method. But thank you again for your prompt and excellent support.

• 

  hallluke · Member · Jul 8, 2016 at 8:32 am

  • Copy link

  If you find a thinner image to use that could look good, you’ll just need to change some of the pixel measurements to suit the new sizing. Let me know if you want a second opinion.

• 

  stevetarbuck · Member · Jul 8, 2016 at 9:02 am

  • Copy link

  Thanks, I will certainly share a link when I have made some for changes for your opinion. Have a great day buddy.