Docs

[giftofjehovah]

Hi,

my website is http://www.langelir.com

1. How could I add the search bar at the menu (instead of just the magnifying glass you see)

2. Alternatively, is it possible to add it to the top bar? Please advise (:

3. Also how do I fix the photos of the products on the search result page as of current, using the in-built search by woo commerce or X theme (the magnifying glass in the menu bar)?

Thank you so much for your help!

Best regards,
Vivien

[Paul R]

Hi Vivien,

Thanks for writing in!

To be able to do this customization, you’ll need to set up a child theme first.

How to Setup Child Themes

1. To add search in menu

You can add the code below in child theme’s functions.php

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 .= '</li>';
    }
return $items;
}
add_filter('wp_nav_menu_items','add_search_to_wp_menu',10,2);

2. To add search in topbar

Create file _topbar.php in x-child-renew/framework/views/global/_navbar.php
then copy the code below into that file

<?php

// =============================================================================
// VIEWS/GLOBAL/_TOPBAR.PHP
// -----------------------------------------------------------------------------
// Includes topbar output.
// =============================================================================

?>

<?php if ( x_get_option( 'x_topbar_display', '' ) == '1' ) : ?>

  <div class="x-topbar">
    <div class="x-topbar-inner x-container-fluid max width">
      <?php if ( x_get_option( 'x_topbar_content' ) != '' ) : ?>
      <p class="p-info"><?php echo x_get_option( 'x_topbar_content' ); ?></p>
      <?php endif; ?>
      <?php x_social_global(); ?>
      <div class="searchform"><?=get_search_form();?></div>
    </div>
  </div>

<?php endif; ?>

3. I am not sure what you want to do with the photos, but you can remove it in the search results page using the code below.

You can add this under Custom > CSS in the Customizer.

.search.search-results img {
    display:none;
}

Hope that helps

[giftofjehovah]

Hi,

Thank you so much!
But I have a terrible experience with functions.php, my screen “white” out twice so I’m not gonna touch that HAHA do you have alternative like plugins or custom > css instead?

Sorry for the trouble!

Thank you so much for your help, I appreciate it(:

Best regards,
Vivien

[Kosher K]

Hi Vivien,

Sorry for the trouble, I understand the issue with messing up your functions.php, 😉

Would you mind providing wordpress and FTP access to your site so I can implement the changes directly, and mess with your functions.php lol

Don’t forget to provide FTP access so we can fix for any functions.php error

Cheers

[giftofjehovah]

This reply has been marked as private.

[Rad]

Hi there,

I just added the code with no problem, but I couldn’t check if it works with your menu. You’re using a cache plugin which I couldn’t check your output in real time.

Please provide an admin login too, or clear your cache then check if it works.

Thanks!

[giftofjehovah]

Hi!

My friend managed to get it in hahaha
but thank you so much for all the help!
SUPER appreciate all the support! ((:

Best rgds,
Vivien (:

[Christopher]

You are welcome 🙂
Take care.

[giftofjehovah]

Hi there!

I have another problem with the search bar, it does not centre itself like My Account and My Cart when view in a mobile version. Could you help me fix that problem?

Thanks!

[Christian]

Hey there,

We’d love to help you with your concern however, that would be additional development so that would fall beyond the scope of our support.

Thank you for understanding.

[Christopher]

Hi there,

Please add the following CSS code under Customize -> Custom -> CSS:

@media (max-width:979px){
.form-search .search-query {
margin-left: 0;
}
form#searchform {
margin: 0 auto;
display: block;
float: none;
width: 245px;
}
}

Hope it helps.

[giftofjehovah]

Hi there,

it helps! but my search bar is at the left side now. How can I achieve this and still have it on the right side on the website view?

[giftofjehovah]

Hi,

there is another problem, I could not click on the search bar. It is only clickable at certain point in the text box. What could be done to solve this problem?

[Zeshan]

Hi there,

Thank you for writing in!

Add following CSS code under Custom > CSS in the Customizer:

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

Hope this helps. 🙂

Thank you.

[giftofjehovah]

Hi,

it helps! but the search icon is out of the text box now. Could you help me on shifting this back to the text box? 🙂

[Author]

Posts