Move search bar to header?

Resolved EffectiveBusiness.org
(@effectivebusinessorg)

10 years, 4 months ago

Hey Alexander,

Great theme and super lush to use (as a new WordPress-er) but I wondered if you had a way to move the search bar widget into the header, right aligned?

My site is here (http://www.effectivebusiness.org) if it helps! massively grateful for any direction!

Neil.

Viewing 15 replies - 1 through 15 (of 17 total)

1 2 →

Alexander Agnarson
(@alxmedia)

10 years, 4 months ago
If you go to Appearance > Menus and add at least 1 menu link to the area “Topbar” you will see a search field appearing to the right.

Learn more how to use here: http://codex.wordpress.org/WordPress_Menu_User_Guide

If you mean the sidebar header area, the colored part, then you’d need to make a child theme and then override sidebar-2.php, and put
```
<?php get_search_form(); ?>
```
Inside of the sidebar-top div, instead of the “More” text.
Thread Starter EffectiveBusiness.org
(@effectivebusinessorg)

10 years, 4 months ago

OK thanks for that!

I actually meant the ‘Header’ menu area which appears below the logo but above the main body content?

Those two fixes you gave me are suitable if it can’t be done however!

Cheers,

Neil.

Alexander Agnarson
(@alxmedia)

10 years, 4 months ago

Putting it in the header involves quite a bit more as it needs to work in a certain way to look good on the responsive layout. So, beyond what I can help with. Hope the other 2 alternatives will work well though!

Thread Starter EffectiveBusiness.org
(@effectivebusinessorg)

10 years, 4 months ago

I’m sure they will.

I’ll read up on child templates and stick it in the ‘green bit header’ that will look fine and dandy.

Thanks again!

Neil.

thespinsterz
(@thespinsterz)

10 years, 4 months ago

Just wanted to say that this is something that I would really like to. For the search box to appear on the right of the header nav menu, directly above where it says “more”.

THanks!
grafis
(@snackmaster)

10 years, 1 month ago
To get the Topbar navigation Search (which is awesome and why we’re all here, thank you Alex!) into the Header navigation try the following – working well for me with responsive layout. If there’s any glaring issues here let me know, try at your own risk.

1. Copy header.php to the Hueman Child Theme (if you’re not using a Child theme just Edit header.php and remember to update it after every new release)

2. In header.php copy all contents of <div class=”container”>….</div> from the Topbar section (lines 27 to 36 for me)

3. Paste before the closing </nav> bracket in the Header group <?php if (has_nav_menu(‘header’)): ?> (after the closing div for <div class=”nav-wrap container”> and before the closing </nav> tag – line 46 for me)

Like this:
```
<?php if (has_nav_menu('header')): ?>
<nav class="nav-container group" id="nav-header">
<div class="nav-toggle"><i class="fa fa-bars"></i></div>
<div class="nav-text"></div>
<div class="nav-wrap container"><?php wp_nav_menu(array('theme_location'=>'header','menu_class'=>'nav container-inner group','container'=>'','menu_id' => '','fallback_cb'=> false)); ?></div>


<div class="container">
<div class="container-inner">
<div class="toggle-search"><i class="fa fa-search"></i></div>
<div class="search-expand">
	<div class="search-expand-inner">
		<?php get_search_form(); ?>
	</div>
</div>
</div>
</div>


</nav>
<?php endif; ?>
```
st.idnacius
(@stidnacius)

10 years ago

Nice tips Snackmaster! Thank you.

cassy785
(@cassy785)

9 years, 8 months ago

Hi Alexander,

thanks for your wonderful theme first of all! I love it!

I have a similar question like Neil.

I would like to move one of the two sidebars (sidebar s1 or sidebar s2) to the place where the topnavigation is displayed usually.

Why I would like to do that? I`m searching for a possibility to have a main menu there I would like to be able to klick at “topic a”. By clicking I would like to be the second menu shown with the subnavigation from “topic a”. So at that navigation I would like to have something like that: “topic a – 1” , “topic a -2” , “topic a -3” and so on.

I can`t find another way to do this instead of using the sidebars and adding an individual menu to them.

But like I said I wouldn`t like to be the second menu displayed as sidebar but as topbar.

Do you think this is possible and how?

Hope you can understand what I mean?

Thanks a lot for your response!

Cheers

jimchicago
(@jimchicago)

9 years, 5 months ago

I have read this thread carefully and looked at probably a dozen other sites, but I am still not clear about how to add a search form into the main nav bar (at the far-right end) of this site, which is using the Hueman theme and a child version of it. I tried following Snackmaster’s instructions but he lost me at about step #3.

Thanks for any help you can provide.
jimchicago
(@jimchicago)

9 years, 5 months ago
Wow, guess I did something right after all, because I just noticed that the R-hand end of my site’s (“header”) nav bar now has a magnifying-glass icon and when I click it, a search form drops down from it.

In the past few hours I’ve tried so many different ways to make the form appear that I’m not sure how I did it, but I think it was by adding this code to my child theme’s header.php:
```
<div class="container">
<div class="container-inner">
<div class="toggle-search"><i class="fa fa-search"></i></div>
<div class="search-expand">
	<div class="search-expand-inner">
		<?php get_search_form(); ?>
	</div>
</div>
</div>
</div>


</nav>
				<?php endif; ?>

			</div>
		</div>

	</header>

	<div class="container" id="page">
		<div class="container-inner">
			<div class="main">
				<div class="main-inner group">
```
Can anyone tell me how to edit this (or some other) code to make the search form appear to left of the magnifying-glass icon (that is, inside the nav bar), instead of below the icon? THANKS.
sagdude2002
(@sagdude2002)

9 years, 5 months ago

Hi Jim,
Did you copy header.php from the parent theme, paste it in the child and then enter
<?php endif; ?>

</div><!–/.container-inner–>
</div><!–/.container–>

</header><!–/#header–>

<div class=”container” id=”page”>
<div class=”container-inner”>
<div class=”main”>
<div class=”main-inner group”>

after </nav><!–/#nav-header–> and before <?php if (has_nav_menu(‘header’)): ?>? Because I tried that and it didn’t work. I also tried Snackmaster’s suggestion and that didn’t work either.

jimchicago
(@jimchicago)

9 years, 4 months ago

Thanks, sagdude; I don’t think I had added those exact lines of code to my child theme’s header.php. Gave it a try and it took the site down (I have since restored the site by re-uploading my previous header.php).

When I look in header.php, the <?php if (has_nav_menu('header')): ?> comes several lines before the , so I don’t see how anyone could place those lines in header.php as you said.

Any other suggestions from anyone on how to make the search form appear <b>to the left of the magnifying-glass icon, instead of dropping down below the icon?

sagdude2002
(@sagdude2002)

9 years, 4 months ago

Jim – I’m confused by your post. I thought you had it figured out. So I ASKED you if that was the code you entered to make it work. I was looking for a solution myself … I was not recommending that you enter that code. If you look at the end of my post I wrote “I tried that and it didn’t work.” Also, I’m not sure why your site would have gone down. I entered the same code on my site and nothing happened. Anyway, just wanted to clarify. I wound up just using the search widget at the top of the right column. Hope you find a solution.

FadingMusic
(@fadingmusic)

9 years, 4 months ago

Man, you guys can be confusing! 😛 😀
FadingMusic
(@fadingmusic)

9 years, 4 months ago
Here is the edited header.php from the newest Hueman theme version.
This will move the whole search div from the top menu to the header menu.
```
<!DOCTYPE html>
<html class="no-js" <?php language_attributes(); ?>>

<head>
	<meta charset="<?php bloginfo('charset'); ?>">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<title><?php wp_title(''); ?></title>

	<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>">

	<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>

<div id="wrapper">

	<header id="header">

		<?php if (has_nav_menu('topbar')): ?>
			<nav class="nav-container group" id="nav-topbar">
				<div class="nav-toggle"><i class="fa fa-bars"></i></div>
				<div class="nav-text"></div>
				<div class="nav-wrap container"><?php wp_nav_menu(array('theme_location'=>'topbar','menu_class'=>'nav container-inner group','container'=>'','menu_id' => '','fallback_cb'=> false)); ?></div>

			</nav>
		<?php endif; ?>

		<div class="container group">
			<div class="container-inner">

				<div class="group pad">
					<?php echo alx_site_title(); ?>
					<?php if ( ot_get_option('site-description') != 'off' ): ?><p class="site-description"><?php bloginfo( 'description' ); ?></p><?php endif; ?>
				</div>

				<?php if (has_nav_menu('header')): ?>
					<nav class="nav-container group" id="nav-header">
						<div class="nav-toggle"><i class="fa fa-bars"></i></div>
						<div class="nav-text"></div>
						<div class="nav-wrap container"><?php wp_nav_menu(array('theme_location'=>'header','menu_class'=>'nav container-inner group','container'=>'','menu_id' => '','fallback_cb'=> false)); ?></div>
				<div class="container">
					<div class="container-inner">
						<div class="toggle-search"><i class="fa fa-search"></i></div>
						<div class="search-expand">
							<div class="search-expand-inner">
								<?php get_search_form(); ?>
							</div>
						</div>
					</div>
				</div>
					</nav>
				<?php endif; ?>

			</div>
		</div>

	</header>

	<div class="container" id="page">
		<div class="container-inner">
			<div class="main">
				<div class="main-inner group">
```