Fixed menu

• 

  iboglarka · Member · Aug 25, 2017 at 5:49 pm

  • Copy link
  • Add topic to favorites

  I would like to fix the header menu. Can somebody help me with a CSS code to fix these 2 div and look nice when scrolling on every device? The theme we are using is Corporate. Thank you

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

• 

  kathrynwp · Staff · Aug 25, 2017 at 8:13 pm

  • Copy link

  Hi there – give this a try in your custom CSS:

  .site-header {
  	position: fixed;
  	top: 0;
  	z-index: 10;
  }

  Let me know how it goes.

• 

  iboglarka · Member · Aug 27, 2017 at 9:51 am

  • Copy link

  The header is now fixed, but the div with the featured image goes behind the fixed div(i canțt see the head of the girl with umbrella)

• 

  kathrynwp · Staff · Aug 27, 2017 at 11:08 pm

  • Copy link

  You could give this a try to compensate for that:

  /* Add some padding to see more of the top of the hero image */
   .site {
       padding-top: 200px;
  }
  /* Add even more padding on smaller screens */
  @media screen and (max-width: 900px) { 
  	.site {
  	  padding-top: 250px;
  	}
  }

• 

  thesacredpath · Member · Aug 28, 2017 at 3:43 am

  • Copy link

  Hi there, for the header image, what we can do is to change the top background position to bring the image down. Go to Customize > CSS, delete all the informational text in that window, and paste in the following custom CSS. You can adjust the 250px value I have if you wish. 250 seems to be about the farthest we can go though, which is why I added the second rule to change the background color of the #page-header section to white so that there isn’t a band of color at the top of the image.

  .cover {
  	background-position: center 250px;
  }
  #page-header {
  	background-color: #fff;
  }

• 

  iboglarka · Member · Aug 28, 2017 at 10:39 am

  • Copy link

  Thanks for everyone!