Search box

Anyone here can help? website is natureheals.co.uk
thanks

The basic code if you want to try it is:

.search-form {
    position: fixed;
    top: 10px;
    right: 20px;
}

Which fixes it to the top of the screen. As you only want it like that in responsive, then add @media:

@media all and (max-width:779px) {
.search-form {
    position: fixed;
    top: 10px;
    right: 20px;
}
}

Adjust any positions, try using % rather than px on the right: code

OK, I’ve added both sets of code in child theme style.css. It’s removed it from the drop down menu alright but I cant see it anywhere now.

I’m checking on iPhone 6 plus

OK, I’ve removed the first part , cleared all my caches and it works now.

But it appears only when the menu is expanded . I’d like it to be there all the time?

The first code should work with any screen/viewport. The second is the Bootstrap2 standard (779/780px) which is where the Menu button kicks in by default.

no sorry , the looking glass icon does not appear until you expand the menu dropdown. it should be there all the time as there is no point in having it out of the dropdown if you have to expand it to see it..hope this makes more sense now?

thanks for you help so far

Mistake #1 – Menu button appears at 979/980px, not as I stated. So 2nd code should have been:

@media all and (max-width:979px) {
.search-form {
    position: fixed;
    top: 10px;
    right: 20px;
}
}

So back to beginning, you have the search form visible in the full Navbar Box >= 980px. Is that what you want?

If so, new code should handle devices up to 980px.

@media all and (max-width:979px) {
.nav-collapse .search-form,
.nav-collapse.in.collapse .search-form {
  position: fixed;
  right: 20px;
  top: 10px;
}
}

I’m still missing something (have tried z-index) but if you could add that and it will make it easier for me to see what is happening.

Yes I want the search form to pop out of the drop down menu in <=979. It’s fine in the >=980 menu (full navbar)

not sure how to use the z-index thingybob though, i’ve added the code but i can’t see the search looking glass top right corner

Been discussing with @d4z and it’s not a simple CSS fix. He’s investigating and will post here if he finds a solution.

Cheers rdell

Hello,
can you share the code you used in your child-theme functions.php and the respective css?
Thanks

For how it is now? Without rdells new code?

PHP:

// As of 3.1.10, Customizr doesn't output an html5 form.
add_theme_support( 'html5', array( 'search-form' ) );

add_filter('wp_nav_menu_items', 'add_search_form_to_menu', 10, 2);
function add_search_form_to_menu($items, $args) {

	// If this isn't the main navbar menu, do nothing
	if( !($args->theme_location == 'main') )
		return $items;

	// On main menu: put styling around search and append it to the menu items
	return $items . '<li class="my-nav-menu-search">' . get_search_form(false) . '</li>';
}
// Exclude images from search results - Customizr
add_action('init', 'exclude_images_from_search_results');
function exclude_images_from_search_results(){
    if ( is_admin() )
        return;
    remove_filter( 'pre_get_posts', array(TC_post_list::$instance,'tc_include_attachments_in_search') );
}

CSS:

/* my-nav-menu-search menu item created in functions.php. Move it way over to the left */
.notresp.navbar .nav .my-nav-menu-search {
    float: right;
}
.notresp.navbar .nav {
    width: 100%;
}

/*Stop the display of the Search button*/
.my-nav-menu-search .search-submit {
    display: none;
}
/* The "Search for" text is needed for screen readers, but we move it off screen, so we won't see it */
.my-nav-menu-search .search-form .screen-reader-text {
    position: absolute;
    left: -9999px;
    overflow: hidden;
}

/* Style the search input textbox */
.my-nav-menu-search .search-field {
    background: transparent;
    border: none;
    -webkit-box-shadow:    none;
    -moz-box-shadow:       none;
    box-shadow:            none;
    cursor: pointer;
    height: 26px;
    margin: 2px 0 2px 0;
    padding: 0 0 0 36px;
    position: relative;
    -webkit-transition: width 400ms ease;
    -moz-transition:    width 400ms ease;
    -o-transition:      width 400ms ease;
    transition:         width 400ms ease;
    width: 0px;
}

/* Expand the search box when you click it */
.my-nav-menu-search .search-field:active,
.my-nav-menu-search .search-field:focus {
    color: #5a5a5a;
    /* change the colour above if you are working with a dark navbar background */
    border: 2px solid #c3c0ab;
    cursor: text;
    outline: 0;
    width: 60px;
    -webkit-box-shadow: none;
    -moz-box-shadow:    none;
    box-shadow:         none;
    margin: 0;
}

/* Add a magnifying glass background */
.my-nav-menu-search .search-form:before {
    font-family: 'genericons';
    content: '\f400';
    position: absolute; /* this is the key to put it visually inside the search field */
    font-size: 19px;
    font-weight: normal;
    padding-top: 5px; /* tune this vertical alignment inside the search field, as needed */
    padding-left: 5px; /* tune this horizontal alignment inside the search field, as needed */

}

Ok,
so my idea is to print 2 search forms, one will stay in the menu, the other one below the tagline in mobiles. So:
– Add the following to your child-theme functions.php

add_filter('tc_tagline_display', 'add_search_form_to_mobile_tagline');
function add_search_form_to_mobile_tagline( $html){
  global $wp_current_filter;
  if ( in_array('__navbar', $wp_current_filter ) ) //do nothing when displaying no mobile tagline
    return $html;

  $form = '<div class="my-nav-menu-search">' . get_search_form(false) . '</div>';
  return str_replace( '</div>', $form . '</div>', $html );
}

– Add the following to your child-theme style.css:

.tc-header .outside .my-nav-menu-search {
  text-align: left;
}
.tc-header .outside .my-nav-menu-search label  {
  width: 0;
}
@media (max-width: 979px){
  .navbar .my-nav-menu-search {
    display: none;
  }
}

As you can see you can style the menu item with .navbar .my-nav-menu-search and the new one with .tc-header .outside .my-nav-menu-search

Hope this helps.

p.s.
we don’t use media queries for the new search form ’cause the .tc-header .outside div is visible just when windows width is less than 980px