CSS sticky header for Oxygen theme

• 

  mycarta · Member · Dec 9, 2012 at 6:02 pm

  • Copy link
  • Add topic to favorites

  I managed to get a sticky header with some experimenting using this bit of code

  /* Header
  ----------------------------------------------- */
  #masthead {
  	clear: both;
  	padding: 60px 0 0;
  	width: 100%;
  	position: fixed;
  	z-index: 200;
  	background-color: #fff;
  }
  
  #main {
  	margin-top: -35px;
  }

  It seems to work well. Can anyone suggest a way to start the content down so it is not hidden by it?
  More difficult: How can I make the black box of secondary menu also sticky?
  Thank you

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

• 

  mycarta · Member · Dec 11, 2012 at 1:07 pm

  • Copy link

  Adding an example:

  something like the header menu of this site:
  http://davidchambersdesign.com/css-fixed-position-headers/

  Or, in wordpress.com world, the fixed sidebar menu in the Oulipo theme:
  http://oulipodemo.wordpress.com/

  I am trying to fix both header and the secondary menu black box, but on the latter I can live without if it’s too complicated.

  Thanks

• 

  mycarta · Member · Dec 16, 2012 at 8:36 pm

  • Copy link

  I managed to get it all done.
  I wrote about it and shared the CSS code directly on the blog for anyone interested.
  http://mycarta.wordpress.com/2012/12/16/mycarta-blog-facelift-wordpress-com-oxygen-theme-customised-with-css/

• 

  houstonweaver · Member · Dec 17, 2012 at 4:13 am

  • Copy link

  Thank you for sharing how you did it. Pretty cool.