Creating a Static Menu in CSS

• 

  aishcenter · Member · Feb 24, 2016 at 6:12 pm

  • Copy link
  • Add topic to favorites

  Hi,

  I was wondering how I could be able to make my menu static so that when someone scrolls in the site, the menu remains at the top.

  I’m not advanced at CSS, so I don’t really know how to go about this.

  Thanks,
  Tina

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

• 

  thesacredpath · Member · Feb 24, 2016 at 7:36 pm

  • Copy link

  Hi, give the following a try and see what you think. What I’ve done is to use a Media Query to limit this change to screens/windows 960px and wider. Below that the touch device menu comes into play for phones and tablets.

  @media screen and (min-width: 960px) {
  #page {
      position: relative;
  }
  .site-header {
      position: fixed;
      top: 32px;
      z-index: 1;
      background: #fff;
  }
  .site-content {
      margin-top: 100px;
  }
  }