How do I add a sticky menu with CSS to penscratch 2 theme

  • Unknown's avatar
    sofiefelice · Member ·

    I’d like to add a sticky menu to my penscratch theme. I have code the following code:
    left: 0;
    top: 0;
    position: fixed;
    padding: 5px 0;
    width: 100%;
    text-align: center;

    But when I add this to the css customize nothing happens..

    Can someone help me? Thanks in advance

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

  • Unknown's avatar
    wdn2020 · Member ·

    Can you provide us with your css selector as well?

  • Unknown's avatar
    thesacredpath · Member ·

    Hi @sofiefelice, given the way the html and CSS are structured in Penscratch 2, this is about the best we can do for fixing the menu to the top, and we have to limit it to screen/window widths where the full menu shows (before it changes to the menu toggle touch device design below 800px in width. 

    @media screen and (min-width: 800px) {
  .main-navigation {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100% !important;
    text-align: center;
    background-color: #fff;
  }
}
@media screen and (max-width: 1199px) {
  #page {
    margin-left: auto;
    margin-right: auto;
  }
}

    I added a white background to the menu to keep the menu text labels from getting lost in the content when someone scrolls down. You will notice that the menu goes full width rather than the width of the content area. This is a drawback to using position: fixed; as there is really no way to reliably center a div set to fixed position.

  • The topic ‘How do I add a sticky menu with CSS to penscratch 2 theme’ is closed to new replies.