<div id="search-box">
            <?php get_search_form(); ?>
        </div><!-- end of #search-box -->

#header #search-box {
    clear:right;
    float:right;
    margin:20px -20px 0 0;
    width:30%;
}

#header #search-box #s {
}

.ie7 #header #search-box {
    margin-top:10px;
    text-align:right;
}

kuszimy wrote:

How to set search-box as a last position in header menu?

I've already customized a few things with child template, but I don't know if I should alter the header menu or go deeper and override functions in functions.php file.

<div id="search-box">
            <?php get_search_form(); ?>
        </div><!-- end of #search-box -->

kuszimy wrote:

Thanks for quick reply, but I'm trying to avoid solving this problem with CSS.


Is there any way to pass additional parameter to wp_nav_menu,

<?php wp_nav_menu(array(
      'container'       => '',
      'theme_location'  => 'header-menu')
      ); 
?>

so that in HTML source code it would look like:

<ul class='header-menu'>
      <li>option 1</li>
      <li>option 2</li>
      <li>option 3</li>
      <li><form id="searchform"><input type="text"></form></li>
</ul>

lutfi.torla wrote:

Hi, I've tried doing the above as you suggested, but I either get the search box above the menu or below the menu, depending on where I put the div.

<div id="search-box">
        <?php get_search_form(); ?>
</div><!-- end of #search-box --> 
</div><!-- end of col-300 fit -->

<?php wp_nav_menu(array(
    'container'       => '',
    'theme_location'  => 'header-menu')
    ); 
?>

How do I make it inside the menu bar on the far right? Similar to http://themeid.com/forum/misc.php?action=pun_attachment&item=25&preview.
You can see my website at http://www.lutfitorla.com/.

Thank you.

lutfi.torla wrote:

At first I couldn't figure out what you meant by "using margins to push it down" because wehenever I did it, everything else (including the menu) would go down as well. Then I remembered negative margins. Here's my new code, edited from your CSS code above. The code in header.php is the same as what you've given.

#header #search-box {
    clear:right;
    zoom: 1;           //IE hack
    position:relative; //IE hack
    float:right;
    margin:60px -25px -60px 0;
    width:300px;}

#header #search-box #s {
}

.ie7 #header #search-box {
    margin-top:10px;
    text-align:right;
}

The margins 60px & -60px can be changed based on your own website (if you want to make it pixel perfect). Keep them the same (i.e. 73px & -73px). Smaller number moves it up. Bigger number moves it down.


The following code goes later on into each of the media queries (all 3 of them) at the bottom of the child theme css.

#header #search-box {margin:5px -20px 0px 0;}

This is important so that the search box moves above the menu on smaller screen devices.

You can see how it works now at my website.

Thank you for the help.

#header #search-box {
    clear:none;
    float:none;
    margin:0;
}

exploderizer wrote:

Hey, I've moved the search bar into the menu bar as described, but I'm having trouble getting it to move below or above the menu when I resize: http://contactcustomerservice.co.uk/

I'm not sure if I've put the bar in the right place in my header.php file. Any help very much appreciated!

exploderizer wrote:

Hi Emil, many thanks, I've opted for a different approach now, the search bar simply disappears. Client is happy with that so it'll be fine

<?php get_sidebar('top'); ?>

#header #search-box #s {
    float: left;
}

#header #search-box #searchsubmit {
    float: right;
}

pjs wrote:

Emil Uzelac wrote:

Copy header.php from Responsive to Responsive Child Theme and add this in:

<div id="search-box">
            <?php get_search_form(); ?>
        </div><!-- end of #search-box -->

Nice plugin, where exactly do we paste that piece of code in?

Emil Uzelac wrote:

is there a live site?

Thanks,
Emil

chrism wrote:

I placed it after the 'logo' div in my child theme's "header.php", just prior to

<?php get_sidebar('top'); ?>

I want the search field in the header itself, level with my logo, so I don't shift it down too much. The problem I'm experiencing is that the submit button is positioned below the search field, whereas I want it positioned to the right. I tried the following additional css:

#header #search-box #s {
    float: left;
}

#header #search-box #searchsubmit {
    float: right;
}

Even though this positions the button to the right, it's still stuck beneath the search field.

pjs wrote:

Nice plugin, where exactly do we paste that piece of code in?

Emil Uzelac wrote:

please do

Emil

chrism wrote:

No, sorry Emil, just on localhost (WebMatrix).

Is it possible to post screenshots, or just online images?

Emil Uzelac wrote:

is there a live site?

Thanks,
Emil

Emil Uzelac wrote:

is this one of latest versions of Responsive Theme?

chrism wrote:

Here's a pic (the logo is changing, obviously!):



Perhaps it's something to do with the additional div at the top for the menubar?

Emil Uzelac wrote:

please do

Emil

Emil Uzelac wrote:

Hi,

Just tested: http://themeid.com/demo/test/ and what I did here was plain search widget drag + drop in the Top Widget.



was that how you have it?

Thanks,
Emil

Emil Uzelac wrote:

.top-widget {
    padding-top: 33px;
}

Thanks,
Emil

thekoolio wrote:

code i have put in is:

#header {
    background-color: white;
}

#header #search-box {
    clear:right;
    float:right;
    margin:20px -60px 0 0;
    width:30%;
}

#header #search-box #s {
}

.ie7 #header #search-box {
    margin-top:10px;
    text-align:right;
}

grappler wrote:

Sorry I keep forgetting to add this css also.

#searchform{
margin:7px;
}

#searchform-item input[type="text"] {
    width: auto;
}

Ulrich

grappler wrote:

This is in addition to the functions code. It make sure the go button is on the same line and move the search bar in the middle of the bar.

Ulrich

Oops! Google Chrome could not find www.birminghamtenthire.com

thekoolio wrote:

hi guys, really appreciate the help. Unfortunately Ulrich I have put those two sets of code in now, and it does not work.... now the code you had in pastebin is just written at the top of my page

www.birminghamtenthire.com

#header #search-box {
clear:right;
float:right;
margin:20px -20px 0 0;
width:30%;
}

#header #search-box #s {
}

.ie7 #header #search-box {
margin-top:10px;
text-align:right;
}

#search-box {
    width: auto;
}

thekoolio wrote:

any ideas yet? this is really bugging me and im spending hours trying to fix it

thekoolio wrote:

Where exactly do I put this code, as it does not seem to do anything in header or css. Ive tried all combination of css and php that yourself and ulrich have suggested and nothing is working. I dont want to be too much longer on your time

Emil Uzelac wrote:

#search-box {
    width: auto;
}

Emil

thekoolio wrote:

any ideas yet? this is really bugging me and im spending hours trying to fix it

#header #search-box select, input[type="text"],
#header #search-box  input[type="password"] {
    width: auto;
}

#search-box select, input[type="text"],
#search-box  input[type="password"] {
    width: auto;
}

thekoolio wrote:

Its still not working because so much was written on this topic Im wondering if two things have crossed paths, please can you go through the following and tell me if they are needed, and if so after which line to put them:

#header {
background-color: white;
}

#header #search-box {
clear:right;
float:right;
margin:20px -60px 0 0;
width:30%;
}

#header #search-box #s {
}

.ie7 #header #search-box {
margin-top:10px;
text-align:right;
}

<div id="search-box">
<?php get_search_form(); ?>
</div><!-- end of #search-box -->

#searchform{
margin:7px;
}

#searchform-item input[type="text"] {
width: auto;
}

Plus what you just gave:

#search-box {
width: auto;
}

Hopefully we are coming to the end of this issue, thank you so much for your time, I will defo recommend you as your service is amazing