Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Page & Category Menu Bars (http://forum.bytesforall.com/forumdisplay.php?f=10)
-   -   [SOLVED] How to add search box to menu bar in Atahualpa 3.7.13 (http://forum.bytesforall.com/showthread.php?t=21381)

ksmusselman Jan 13, 2014 06:39 AM

[SOLVED] How to add search box to menu bar in Atahualpa 3.7.13
Hi all!

I want to put my search box in my menu bar and I was wondering how I can configure the search form to be added to the Configure Header Area like this - if at all possible:

%image %bar1 %pages %searchform %bar2

My main page is an Amazon aStore. I created a template just for the store that does not allow the sidebar; I needed full width to allow the aStore sidebar.


So what happens is I don't have a search box on the store pages, only on the blog pages.

If anyone can help, it will be greatly appreciated!

Thank you!

juggledad Jan 13, 2014 07:15 AM

I would add %logo to the 'Configure Header' option, then blank out the logo image option, shut off the RSS feed icons and then set the searchbox <div> to a height of 0 and use relative positioning to move the search box to the menu where you want it.

ksmusselman Jan 13, 2014 08:55 AM

Thanks juggledad!

I got the box to show up, but I'm having problems with the settings to get it in the right place.

With these settings, the search box shows up below bar2.

%image %bar1 %pages %logo %bar2

Settings for the search box in Configure Header Area:
HTML Code:

margin-bottom: -250;
margin-top: 0;
padding: 0;
position: relative;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, 'Lato', serif;
font-size: 10px;
width: 100px;
height: 0;

I also want the font to be smaller, but these settings don't seem to affect the font at all.

What am I missing? :confused:


juggledad Jan 13, 2014 03:58 PM

1) have you edited any of the theme files?

2) Please shut off your plugin that is minifing the code

Note: You might want to look at the CSS Inserts, looks like you have some sntax errors.

ksmusselman Jan 13, 2014 05:28 PM

Hi juggledad!

I "may" have edited something in the theme files by now, but honestly, I'm not sure. :confused:

Anyway, I have the search box looking the way I want it to look - size & font - just not the Position yet.

It's a shame there's no %searchbox option for the menu bar. That would be perfect! :o

And for now, I deactivated the WP Total Cache, which I'm guessing is what minimized the code?

ksmusselman Jan 13, 2014 05:35 PM

css inserts?

This is what's in the search box style in the configure header:
margin-bottom: -250;
padding: 0px;
position: relative;
font: .80em candara, trebuchet ms, cali;
width: 25%;
height: 0;

What I'm seeing when I look at the source code is that after %bar2, the table ends and a new one starts for the %logo, which is where the search box is, and that seems to put the search box on the next line instead of on the same line as the rest of the links on the menu bar. And I don't know how to change that. :(

<!-- Header -->
<td id="header" colspan="1">

<div id="imagecontainer" class="header-image-container" style="background: url('http://creativepersonalizedkeepsakes.com/wp-content/themes/atahualpa/images/header/blog-header.png') top center no-repeat;"><div class="codeoverlay"></div><div class="opacityleft">&nbsp;</div><div class="opacityright">&nbsp;</div></div> <div class="horbar1">&nbsp;</div> <div id="menu1" class="menu-store-information-container"><ul id="rmenu2" class="clearfix rMenu-hor rMenu"><li id="menu-item-3527" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-3527"><a href="http://creativepersonalizedkeepsakes.com/"><span>&nbsp;Favors Shop Home</span></a></li>
<li id="menu-item-3539" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3539"><a href="http://creativepersonalizedkeepsakes.com/blog/"><span>&nbsp;Blog Home</span></a></li>
<li id="menu-item-119" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-119"><a href="http://creativepersonalizedkeepsakes.com/send-an-email/"><span>&nbsp;Send an Email!</span></a></li>
<li id="menu-item-3550" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3550"><a href="http://creativepersonalizedkeepsakes.com/about-me/"><span>&nbsp;About Me</span></a></li>
<li id="menu-item-3658" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3658"><a href="http://creativepersonalizedkeepsakes.com/submit-guest-post/"><span>&nbsp;Submit a Guest Post</span></a></li>
<li id="menu-item-3870" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3870"><a href="http://creativepersonalizedkeepsakes.com/wedding-planning-party-tips-newsletter/"><span>&nbsp;Subscribe to My Newsletter</span></a></li>
</ul></div> <table id="logoarea" border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td class="logoarea-title" valign="middle"><p class="tagline"></p></td><td class="search-box" align="right" valign="bottom"><div class="searchbox">
<form method="get" class="searchform" action="http://creativepersonalizedkeepsakes.com/">
<div class="searchbox-form"><input class="text inputblur" onfocus="this.value=''" value="Search the blog" onblur="this.value='Search the blog'" name="s" type="text"></div>
</td></tr></tbody></table> <div class="horbar2">&nbsp;</div>
<!-- / Header -->

juggledad Jan 13, 2014 06:36 PM

Well it seems you must have edited the css.php and removed some of the code. Why I don't understand but I can't help you now.

It is my expeience with Atahualpa that there are very few and far between reasons that someone might need to edit one of the theme files because the theme options are so flexible.

If you want to re-install the theme, I might be able to help you then

ksmusselman Jan 13, 2014 09:22 PM

I never edit anything without keeping the original in a backup file, so I never have to reinstall a theme.

I just put the original css.php back in, and it skewed the search box on the site.

Without that code in the css.php, at least the search box was visible. :(

So I guess I'm back to square one now. :confused:

ksmusselman Jan 13, 2014 09:32 PM

Well, regardless of why anyone would want to edit any of the theme's code, that's neither here nor there. I never edit any original code without making a backup file so I never have to reinstall a theme.

Put the missing search box code back into the css.php.

Toying around with the search box style inside the Configure Header area, I now have the search box back inside the %bar2, but it's still dropping down to the next line.

I'm trying to figure out how to "join" the tables now or add the searchbox as another menu item so the box will be up and to the right of the last <li> in the menu bar.

At least now it's visible and workable; I just don't like where it's positioned. :o

juggledad Jan 14, 2014 01:51 AM

Have you tried using the css rule 'top:.....' To move it?

ksmusselman Jan 14, 2014 04:58 AM


position: relative;

It's PERFECT now! Thank you so much!! I'm not a web designer so I didn't know about that rule. ;)

All times are GMT -6. The time now is 04:54 AM.

Powered by vBulletin® Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.