Relocating Search & Friends with Absolute & Relative Positioning
by D.Marv (AKA: Nasty McVasti)
Tired of your community’s search and login/join links being located below the top navigation tabs? With only a few tweaks to your custom stylesheet, you’ll soon be on your way to relocating “search” and friends to greener pastures and friendlier skies.
Let’s briefly walk through the changes you’ll need to make to your custom stylesheet. I’ll show you a method that uses absolute and relative positioning. At a later date, I'll follow up with a different method to achieve the same results.
Get ‘er done:
By default, the #ka_headerBtmNav container is set to position: relative; In your customized stylesheet, set this element to be absolutely positioned. (Also add “clear: both” IE6-friendly)#ka_headerBtmNav {
position: absolute;
clear: both;
}
We’ll be positioning the #ka_headerBtmNav container in relation to the #ka_mainContainer, which is the container that wraps most of your community. Because we need to absolutely position #ka_headerBtmNav in relation to #ka_mainContainer, we’ll have to relatively position #ka_mainContainer.
#ka_mainContainer {
position: relative;
}
You’ll likely also want to hide/remove the site name that appears within <h2> </h2>s at the top of the page. To do this, add the following:
#ka_mainContainer h2 {
display: none;
}
#ka_mainContainer #ka_contentContainer h2 {
display: block;
}
You may also want to add 35px or so of top padding to #ka_header, which will create space for the search and login links to sit nicely. In addition, you may find that the advanced search input boxes overlap the top navigation a bit. Don’t hesitate to be risqué and hide the advanced checkboxes or perhaps try adding some additional CSS to get just the right look you’re after.
The finished product:
If you want to get really crazy, you can relocate the login, join, and forgot password links above the search box as well. I’ve included the necessary styles below:
#ka_mainContainer h2 {
display: none;
}
#ka_mainContainer #ka_contentContainer h2 {
display: block;
}
#ka_headerBtmNav {
position: absolute;
top: 0;
left: 0;
clear: both;
}
#ka_mainContainer {
position: relative;
}
#ka_header {
padding-top: 70px;
}
#ka_headerLogin {
position: static;
float: right;
margin-top: 14px;
width: auto;
}
#ka_headerSearch {
top: 41px;
}
Interested in reading up on CSS positioning? Check out what the W3C has to offer:
http://www.w3schools.com/css/css_positioning.asp
Did you enjoy this tutorial? Have questions, comments, or want to submit one of your own?
Contact us at support@kickapps.com.