The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Position: fixed; Navigation in Tumblr
dailyhat
post 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;

}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
dailyhat
post 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.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 19th March 2024 - 04:06 AM