Docs

[Zeshan]

Hi there,

Thank you for writing in!

Instead of using above code, please try following:

@media (min-width: 980px) {
   .x-topbar .form-search {
      float: left;
   }

   .x-topbar .form-search:before {
      display: inline-block;
      top: 7px;
      left: 39px;
      position: absolute;
   }
}

Cheers!

[giftofjehovah]

Hi there! I applied the code as per above, but the search icon is still not in place the search box. I was able to edit the left to shift it. However, no matter how i edit the top value. the search icon did not move.

Could you assist me in this?

Thanks!

[Nabeel A]

Hi there,

Try this code:

.x-topbar .form-search:before {
display: inline-block;
top: 10px !important;
}

Let us know if this works!

[giftofjehovah]

Yes! Thanks a lot!!!

[Cousett]

Glad we were able to help. 🙂 Have a nice day.

[Eve G]

Hi X support, I tried your above advice for the topbar search bit and ended up with the search box bar spanning the whole topbar – any advice?
X:2.6.0
WP:4.0
http://www.tcec.co.nz/cms

[Christian]

Hey Eve,

What do you want your search bar to look like?

Thanks.

[Eve G]

Sorry – should have said that: Small, to the right hand side, with the placeholder text ‘resource consents’ inside and the search looking glass icon as the submit button.
Thankyou!

[Christian]

Hey Eve,

Sorry for the confusion but we could only help with the size of the search bar. Other customizations would be outside the scope of our support. Please adding a class to your custom headline and add the code below in the Appearance > Customize > Custom > CSS.

.x-topbar .searchform {
    width: 420px;
    margin-bottom: 40px;
}

You can replace the placeholder text in your form’s HTML (see http://prntscr.com/505cv8).

Thanks.

[Tim M]

Hello, i seem to be having an issue with the search bar that i have created in my nav bar

i have added the following coding into the X – Child Theme: Integrity Light: Stylesheet (style.css)

function add_search_to_wp_menu ( $items, $args ) {
if( ‘primary’ === $args -> theme_location ) {
$items .= ‘<li class=”menu-item menu-item-search”>’;
$items .= ‘<form method=”get” class=”menu-search-form” action=”‘ . get_bloginfo(‘home’) . ‘/”><p><input class=”text_input” type=”text” value=”Enter Text & Click to Search” name=”s” id=”s” onfocus=”if (this.value == \’Enter Text & Click to Search\’) {this.value = \’\’;}” onblur=”if (this.value == \’\’) {this.value = \’Enter Text & Click to Search\’;}” /><input type=”submit” class=”my-wp-search” id=”searchsubmit” value=”search” /></p></form>’;
$items .= ‘‘;
}
return $items;
}
add_filter(‘wp_nav_menu_items’,’add_search_to_wp_menu’,10,2);

however nothing is appearing in my navbar – i have created a navbar however you will see it has no items in it. its simply called . as i wanted to create an ‘invisible’ navbar

please help thanks

[Christopher]

Hi there,

Please add this code inside function.php file not style.css

Thank you.

[Tim M]

Great thanks, i would like to edit the stlye of the search box, i would like just the typing box with search in plain text next t it shifted down a bit.

can you help?

thanks

[Christopher]

Hi Tim,

Please provide me with URL.
Thank you.

[Tim M]

http://rsaacademyits.com/rsa-new/

[Cousett]

You can try adding some margin to the top to center it:

input#s {
margin-top: 11px;
}

[Author]

Posts