A fixed header/menu

  • Author
    Posts
  • #161335

    railturkey
    Member
    Original poster

    Hi Ben,

    Can I fix the header and the top menu?

    It would be good for a magazine to see its name continuously..

    Cheers.

    Onur U.

    The blog I need help with is: railturkey.org

    #161351

    binarymoon
    Theme Author

    Hi Onur

    You can use the following css to make the header sticky. I set this to only work on larger screens since it would cover a lot of the screen on a mobile.

    @media only screen and ( min-width: 800px ) {
    
    header.masthead {
        position: sticky;
        z-index: 10;
        top: 0;
    }
    
    }

    Cheers – Ben

    • This reply was modified 9 months by  binarymoon.
    #161367

    railturkey
    Member
    Original poster

    Wonderful..

    Any chance to fix also top menu together with header??

    If not, no worry. Even with this, I love it..

    #161422

    binarymoon
    Theme Author

    I’m afraid there’s no way to do them both. The way they are setup in the html they are separate elements, so you can either stick the header, or the nav, and not both.

    Also, I just noticed the slider buttons overlap the header. If you change the z-index to 20 then the header will sit on top of them.

    Thanks – Ben

    #161448

    railturkey
    Member
    Original poster

    Many many thanks.

    Having header always on top is perfect.

The topic ‘A fixed header/menu’ is closed to new replies.