Keep header at top while scrolling

airodyssey · Member · Dec 5, 2011 at 1:39 am
Copy link

Add topic to favorites
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/
raincoaster · Member · Dec 5, 2011 at 1:40 am
Copy link
Oh god. Yes, I remember Geocities.
thesacredpath · Member · Dec 5, 2011 at 2:59 am
Copy link
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;
}
```
timethief · Member · Dec 5, 2011 at 3:00 am
Copy link
~~ thesacredpath
Hey there — you are amazing. :)
timethief · Member · Dec 5, 2011 at 3:01 am
Copy link
~~ raincoaster
I thought I’d washed geocities from my mind but brought them back. :
thesacredpath · Member · Dec 5, 2011 at 4:05 am
Copy link
Yeah, thanks raincoaster. Now I’m going to have nightmare for weeks!

Timethief, thanks.
tuttle50 · Member · Jan 8, 2012 at 1:58 pm
Copy link
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)
thesacredpath · Member · Jan 8, 2012 at 6:03 pm
Copy link
What a difference a single comma can make. I forgot one right after .main in the selector below.
```
.main, #sidebar {
margin-top: 145px;
}
```
tuttle50 · Member · Jan 9, 2012 at 7:26 am
Copy link
Thank you very much ! It’s good for me :o)
Have a nice week !
thesacredpath · Member · Jan 9, 2012 at 8:30 am
Copy link
You are welcome and you too.

No items found.