Position: fixed; Navigation in Tumblr |
Position: fixed; Navigation in Tumblr |
dailyhat |
Jan 17 2011, 01:47 AM
Post
#1
|
Group: Members Posts: 2 Joined: 17-January 11 Member No.: 13,606 |
Hi,
I am new to these boards and have a question about Fixed navbars. I am running a modified tumblr theme and I would like to make the header and navigation fixed at the top of the browser window at all times. Below is the code I have for the Header and Nav area. Here is a link to the tumblr. Currently the Header is centered but the navigation is not and both are behind the posts. I would like them both to be centered and stay IN FRONT of all posts. I feel like it is an easy fix but I am lost and need help! thanks in advance! /*----- MASTHEAD -----*/ .noMeta > div { padding: 0px; } #masthead { margin-bottom: 0px; background: #000; height: 167px; width:500px; position:fixed; } #masthead h1 { margin-bottom: 0; } #masthead h1 a:link, #masthead h1 a:visited { text-transform: Uppercase; color: #fff; text-decoration: none; } #masthead h1 a:active { outline: 0; } #masthead p { font-family: Georgia, serif; font-size: 20px; color: #000; margin-bottom: 0; } #masthead a:link, #masthead a:visited { color: #000; } #siteDescription{ font-size: 13px; color: #222; text-transform: Uppercase; border-top: 1px solid #222; margin-top: 20px; margin-bottom: -5px; padding: 15px 0 0 0; font-family: Cufon; } /*----- SEARCH FORM -----*/ #frmSearch { padding-top: 20px; display: none; } #txtSearch { background: url(http://static.tumblr.com/bpryy0m/6lRl6gmys/search.jpg) left no-repeat; width: 225px; padding: 2px 0 0 20px; font: 12px/12px Georgia, "Times New Roman", Times, serif; color: #222; border: 0px; } /*----- MAIN HEADER NAV STRIP -----*/ #mainNav { border-top: 1px solid #222; border-bottom: 2px solid #222; margin-top: 20px; padding: 15px; font-family: Cufon; position: fixed; } #mainNav ul { list-style: none; margin: 0; padding: 0; } #mainNav li { margin: 5px; display: inline; padding: 0; } #mainNav a:link, #mainNav a:visited { padding: 0; font-size: 14px; line-height: 14px; margin: 0 2px; text-decoration: none; color: #222; text-transform: Uppercase; } #mainNav a:hover, #mainNav a:active { outline: none; text-decoration: none; border-bottom: 1px solid #222; } #mainNav a.active { text-decoration: none; border-bottom: 1px solid #222; } |
dailyhat |
Jan 17 2011, 04:03 AM
Post
#2
|
Group: Members Posts: 2 Joined: 17-January 11 Member No.: 13,606 |
Update:
figured most of it out on my own. It was a z-index problem mostly. That and I had "position: fixed;" for the mainNav. |
Christian J |
Jan 17 2011, 06:52 AM
Post
#3
|
. Group: WDG Moderators Posts: 9,628 Joined: 10-August 06 Member No.: 7 |
Side-note: a potential usability problem with fixed headers or footers is of course that they obscure the scrollable content.
This gets especially bad if you use the Page Down key to scroll down a whole page at the time, then you always have to scroll up a bit in order to see the part hidden behind the fixed header. This has become a major annoyance to me now that more and more sites add fixed headers. |
Lo-Fi Version | Time is now: 19th March 2024 - 04:06 AM |