Keep header at top while scrolling

  • Author
    Posts
  • #769240

    airodyssey
    Member

    Hi. A user on the French forums asks if it’s possible to keep the header (or the header tabs) on top at all times, even when scrolling down. I suppose it might be possible with the Custom Design upgrade, but I wanted to make sure first. Their address is: http://alternativeslibresblog.wordpress.com/

    #769390

    raincoaster
    Member

    Oh god. Yes, I remember Geocities.

    #769397

    Yes, it is possible with CSS. The following would work with Nishita and the content will flow up underneath the header. They would need to try it (after the Custom Design Upgrade) both while logged in and while logged out as I’m not entirely sure if everything will shift down properly for the admin bar. If it doesn’t adjust for the admin bar, I’ll have to do some more ciphering.

    .container {
    position: relative;
    }
    
    #header {
    position: fixed;
    }
    
    .main #sidebar {
    margin-top: 190px;
    }
    #769399

    timethief
    Member

    ~~ thesacredpath
    Hey there — you are amazing. :)

    #769400

    timethief
    Member

    ~~ raincoaster
    I thought I’d washed geocities from my mind but brought them back. :\

    #769411

    Yeah, thanks raincoaster. Now I’m going to have nightmare for weeks!

    Timethief, thanks.

    #769573

    tuttle50
    Member

    Hi !
    I’m the administrator of this website http://alternativeslibresblog.wordpress.com/
    Thank you to everybody, for helping me (specially airodyssey and thesacredpath).
    I did that :

    Yes, it is possible with CSS. The following would work with Nishita and the content will flow up underneath the header. They would need to try it (after the Custom Design Upgrade) both while logged in and while logged out as I’m not entirely sure if everything will shift down properly for the admin bar. If it doesn’t adjust for the admin bar, I’ll have to do some more ciphering.

    .container {
    position: relative;
    }

    #header {
    position: fixed;
    }

    .main #sidebar {
    margin-top: 190px;
    }

    … but my main page begin too top. For exemple : http://alternativeslibresblog.wordpress.com/habitats/construction-en-bottes-de-paille/ The first image is cutting…

    Can I have another help please ? :o)

    Thank you :o)

    #769574

    What a difference a single comma can make. I forgot one right after .main in the selector below.

    .main, #sidebar {
    margin-top: 145px;
    }
    #769575

    tuttle50
    Member

    Thank you very much ! It’s good for me :o)
    Have a nice week !

    #769576

    You are welcome and you too.

The topic ‘Keep header at top while scrolling’ is closed to new replies.