0

I use a WP template with a position: relative default header. I've editedstyle.css with the code below (from this thread):

.home .site-header.no-header-image {
  left: auto;
  position: fixed;
  top: auto;
}
.home .site-content {
  padding-top: 60px;
}

Now header on home page is fixed indeed but it only works for home page, so I've added this to style.css:

.site-header.no-header-image {
  left: auto;
  position: fixed;
  top: auto;
  }
.site-content {
  padding-top: 60px;
}

Header is now fixed on all pages but content of pages is aligned from top of the page and not from header. I've tried to change padding from .site-content to 120/150/180 or any padding but it doesn't affect the padding of the content which does not start from the header anymore.

So here is my issue : having pages content to be aligned from header and header being position: fixed; on all pages.

There must be something I'm missing obviously and tried lots of css modification but can't figure out what's wrong. Also, I've tried the solution from this thread which is supposedly the same problem as mine but it doesn't give any result and header stays relative with this fix.

Thanks.

Community
  • 1
  • 1
Spectro
  • 1
  • Set top: 0; maybe? – Mike Feb 26 '17 at 22:44
  • you could achieve this with javascript: setting the header menu fixed on top of the page when after you scroll down . Look at this answer http://stackoverflow.com/a/2907906/4375054 – fabio Feb 26 '17 at 22:59
  • @Mike I tried from 0 to 200, nothing happened. – Spectro Feb 26 '17 at 23:24
  • @fabio thanks but I have quesiton regarding this: - Is it only possible through jquery ? no walkthrough using css only ? - Admitting you have to use jquery, I have to give my header the correspondant class which will be trigerred with jquery. How am I suppose to set this class to header ? – Spectro Feb 26 '17 at 23:28
  • margin-top your body to the height of the fixed menu? Do you have a live website so we can take a look? – Mike Feb 26 '17 at 23:40
  • margin-top the body of 60px (my header width) will result in having the header margin-top 60px as well so it doesn't work. I don't really have a link, I'm working on a dev site. but links to the 2 threads from my orignial post is exactly what I need to achieve since all this is based from tesseract theme. – Spectro Feb 27 '17 at 00:18
  • set fixed element to top: 0 at the same time! – Mike Feb 27 '17 at 00:27
  • I'm getting a bit confused here, can I post my style.css below ? – Spectro Feb 27 '17 at 12:17
  • Back on this, I'm still missing the right combination. Is it ok iif I post my style.css here ? – Spectro Mar 07 '17 at 13:57

0 Answers0