Move Search Box to the Right of Navigation

Jun 5th, 2009

in Navigation

This video and blog post (below) are an adaptation of Create a Custom Search Box with Thesis, by Ben Bleikamp.

Step 1: Add code to custom_functions.php

Open custom_functions.php in whichever editor you prefer, and type the following code:

// Remove Thesis Navigation
remove_action('thesis_hook_before_header', 'thesis_nav_menu');

// Custom Nav
function custom_nav() {
echo '<div id="nav">';
echo '<div class="nav_container">';
thesis_nav_menu(); // This is thesis default navigation
thesis_search_form(); // Add thesis search box
echo '</div>';
echo '</div>';
}

// Place my custom nav above the header
add_action('thesis_hook_before_header', 'custom_nav');

Step 2: Add code to custom.css

.custom div.nav_container form.search_form {
	float:right; /*Moves search box to the right*/
	margin-bottom:-2em; /*If you want search box to sit on the same gray line the nav sits on, replace this property with margin-top: -2.5em;*/
}
.custom div.nav_container #s {
	font-size:1.3em;
	padding:0.308em;
	width:15.385em;
}
1 Star2 Stars3 Stars4 Stars5 Stars (4) Loading ... Loading ...
Share and Enjoy:
  • email
  • del.icio.us
  • Facebook
  • Digg
  • FriendFeed
  • Twitter
  • StumbleUpon
  • Technorati
  • Reddit
  • Yahoo! Buzz
  • Alexandra
    Fabi, my blog isn't online yet so I can't give you the URL yet...

    I did however find a solution to the problem by reducing the width of the nav menu like so

    .custom .menu {
    width:70%;
    }

    This made room for the search bar alongside the navigation menu without the search bar losing focus. http://diythemes.com/forums/basic-support/12974... put me on the right track.

    Thanks for getting back to me. Love the site, it's really helpful for Thesis newbies like me :-)
  • Alexandra
    Loved the article and the video. Although I managed to move my search box to the right of the navigation menu as decribed here I can't click it... I mean it's not possible to position the mouse into the box and to actually type something. Any ideas as to what I might be missing?
  • Alexandra, what's your url?
  • Thanks Ben! Works beautifully. Will be checking back on this site for more tinkering ideas.
  • how about a step by step tutorial on how to put a custom background on your thesis site.
    Thanks!
  • Have you seen this video yet? If it's missing something please let me know what it is. Actually, The best way to do that is through the red feedback tab. Submit an idea for a new video that addresses what you're looking for. Thanks!
  • Hello. I think the article is really interesting. I am even interested in reading more. How soon will you update your blog?
  • Hey GarykPatton, our goal is to add new videos every week. Got any video ideas? Let us know!
blog comments powered by Disqus

Previous post:

Next post: