Fixed Header

• 

  timmogu · Member · Oct 31, 2016 at 6:18 am

  • Copy link
  • Add topic to favorites

  Hello everybody,

  I’m currently setting up my first side and now reached a problem I don’t know how to solve. To be fair my CSS skills are rudimentary so I would be glad about any detailed help.

  This is my site: https://traveltaiwantours.com/
  I would like everything starting with the blue menu to be fixed, so that when I scroll down it will scroll with the page and not disappear.

  is that possible to achieve with CSS?

  Best regards
  Timmo

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

• 

  thesacredpath · Member · Oct 31, 2016 at 9:56 pm

  • Copy link

  Hi Timmo, what I’ve done here, to prevent issues on smaller screens is to use a couple of Media Query to limit this change to only certain width screens/windows. Add the following to your custom CSS and see what you think.

  @media screen and (min-width: 850px) {
      .header-wrapper {
        position: fixed;
        width: 100%;
        z-index: 10;
  }
      .wrapper {
        padding-top: 200px;
  }
  }
  @media screen and (max-width: 940px) and (min-width: 851px) {
      .wrapper {
        padding-top: 250px;
  }
  }

• 

  timmogu · Member · Nov 2, 2016 at 1:10 pm

  • Copy link

  It’s perfect! Thanks a lot :)

• 

  thesacredpath · Member · Nov 2, 2016 at 5:03 pm

  • Copy link

  Awesome, and you are welcome!