Facebook - Sticky Top Nav Bar & More Prettiness

Added by whcodered@userstyles, Created: Feb 10, 2010, Updated: Sep 16, 2011
With the style applied


This is a tweak that fixes basic usage problems and adds a little prettiness to the new Facebook layout introduced in Feb 2010.

This style has been tested with Firefox and Chrome.

- sticks the position of the top nav bar so it stays on the screen when you scroll
- adds a log out button to the nav bar for easy access
- blinks the new notifications icon to make it more obvious you have new notifications
- also provides some visual tweaks, such as rounding some corners, adding drop shadows, and adding subtle animations (Chrome only).

I will update to fix if the basic functionality is broken by Facebook, and may also add other features.

Note that each feature is commented, so if you do not want a specific tweak, just comment it out or delete that section of the style!

Also, check out Facebook Plus - install it on top of this userstyle to round the corners of your Facebook!
Plastikmaniac@userstyles has done a great job on it, and keeps it up-to-date.

More info

Latest release:

Update (9/16/11 10:18):

- FIX: Blank space on the top of content

- FIX: Clean up old code that no longer applies

Older releases:

Update (9/4/11 17:52):

- FIX: Blue bar overlapping content on login screen

Update (9/2/11 04:58):

- FIX: Center top nav bar

Update (8/26/11 15:50):

- FIX: Placement of shadow while logged out

Update (8/1/11 14:05):

- FIX: "Set Facebook as your homepage" bar is functional

Update (7/19/11 21:08):

- FIX: Blue bar overlapping chat sidebar

Update (7/16/11 11:45):

- FIX: Support for the new chat sidebar

Update (7/7/11 22:46):

- FIX: Placement of notification flyouts

- FIX: Styles on chat boxes have been redone

Update (6/22/11 21:43):

- FIX: Styles on notification flyouts work again, again

- FIX: Left column on news feed is fixed in place again

Update (6/3/11 21:07):

- FIX: Styles on notification jewels and flyouts work again

Update (4/27/11 13:25):

- FIX: Compatible with "Unfriend Finder" Greasemonkey script

- FIX: Misplaced shadow when logged out

- NEW: Add CSS3 animations for Firefox 5.0 (Should work in Aurora, but doesn't. Will keep testing)

Update (4/13/11 22:58):

- FIX: Reworked the logout button. Has a new position on the nav bar. This should fix most problems with overlapping text, especially on different languages.

- FIX: Slight photo theater transparency works on Firefox now

- NEW: Friends' "Hovercard" has a shadow

- CHG: Shortened all animation times slightly (Still Webkit browsers only)

Update (3/25/11 17:27):

- FIX: Facebook Questions popup now shows correctly

- NEW: Preliminary tweaks/animations for Questions

Update (3/16/11 15:30):

- NEW: Visual tweaks to the photo theater (slight transparency)

- NEW: Fade-in animations on the new photo theater (Webkit browsers only)

Update (2/24/11 16:45):

- FIX: Left column on main page is fixed in place again

Update (2/21/11 12:41):

- FIX: Removed animation code for Firefox as it caused problems (and Firefox isn't supporting CSS3 animations anytime soon)

Update (2/11/11 17:35):

- FIX: Fixed some shadows overlapping items they shouldn't be

Update (2/1/11 16:28):

- FIX: Fixed main login bar not being shown in some circumstances

Update (1/4/11 21:42):

- NEW: (ONLY Webkit browsers like Chrome support this right now) Slide-in animations on menus, chats, and popup dialogs

Update (12/30/10 14:59):

- FIX: Compatibility with the new Facebook Messages

Update (12/21/10 21:51):

- FIX: Search box results now has a shadow

Update (12/8/10 21:42):

- FIX: Better placement of the permanently visible logout button

Update (11/18/10 13:43):

- FIX: Placement of top light blue bar used for home page reminder

- DEL: Removed Facebook Lite code, as it no longer exists

Update (10/22/10 15:04):

- FIX: Fixed pages when logged out

Update (10/19/10 23:18):

- FIX: Updated nav bar code to reflect Facebook changes

Update (7/20/10 22:31):

- FIX: Updated Logout button to appear correctly again

Update (5/21/10 13:51):

- NEW: Support for shadows and rounded edges on Webkit-based browsers (tested on Chrome)

Update (5/16/10 19:24):

- FIX: Shadows under menus work again

- NEW: Facebook logo and notification "jewels" are now rounded

Update (5/10/10 23:54):

- FIX: Left column stays in place again

Update (5/5/10 08:24):

- FIX: Nav bar now shows content correctly again

- FIX: Shadows now work on chat again

Update (5/4/10 18:55):

- FIX: Facebook updated their HTML code; updated code to fix nav bar

Update (2/13/10 03:47):

- NEW: Added a log out button on the nav bar

Update (2/12/10 07:26):

- NEW: Notifications icon blinks when you have new notifications (friend req, messages, and notifications)

- NEW: Drop shadows on menus and the top nav bar

- NEW: Left column of main page is now fixed in place

- FIX: Login page is no longer shifted down

You should to add comment and rate the style.


+ Create discussion

Applies to:

Related styles:

WARNING: This webware is not functioning properly. Please enable javascript in your browser and try again.