[SaShahParticipant]

Hi,
I have struggled many hours and read many topics and threads here and tried almost all the solutions but UNFORTUNATELY i am unable to do it. i have used other themes in my different projects and this issue is just a few clicks away but i do not know how you can just make this thing so much difficult. i realized that many of your clients having this problem. So can you please let us know that how to setup search bar and Cart (icon) next to logo (nav bar) using woocommerce.
I have attached the image to describe you my needs.
Please! Thanks

[ChristopherModerator]

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[SaShahParticipant]

This reply has been marked as private.

[RupokMember]

Hey there,

Thanks for writing back! Regretfully this isn’t a feature offered by X. It could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding. Take care!

[SaShahParticipant]

now check my URL again please
i found and entered the following code in the functions.php in child:

function add_search_to_wp_menu ( $items, $args ) {

$search = ”;

if( ‘primary’ === $args -> theme_location ) {
$search .= ‘<li class=”menu-item menu-item-search”>’;
$search .= ‘<form method=”get” class=”menu-search-form” action=”‘ . get_bloginfo(‘home’) . ‘/”><div class=”search-box-container”><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” /></div></form>’;
$search .= ‘‘;
}

return $search . $items;
}
add_filter(‘wp_nav_menu_items’,’add_search_to_wp_menu’,10,2);

i think we are nearly there, can you please let me know the CSS to adjust the search bar next to logo and in center. if we able to do that i think lots of other people can take benefit from it.

Thanks

[RupokMember]

Hi there,

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

@media only screen and (min-width: 980px) {
.menu-item-search {
  left: 40%;
  position: absolute;
  top: 20px;
}

.menu-item-search .my-wp-search {
  margin-left: 5px;
  margin-top: -10px;
  padding: 3px 10px;
}
}

Hope this helps.

Cheers!

[SaShahParticipant]

it worked but it also bring some problem:

the search bar pushed the menu to the right side, i have already this in CSS:
.x-navbar .x-container.max.width {
width: 100%;
max-width: 100%;
}

but after adding the search bar the menu is not in its original left position, please let me know how to force menu to its original full width position, i tried many css classes but unfortunately they did not work for me.
Thanks

[SaShahParticipant]

This reply has been marked as private.

[RupokMember]

Hi there,

Thanks for updating. Kindly update the suggested code to following :

@media only screen and (min-width: 980px) {
.menu-item-search {
  left: 40%;
  position: absolute !important;
  top: 25px;
}

.menu-item-search .my-wp-search {
  margin-left: 5px;
  margin-top: -10px;
  padding: 3px 10px;
}
}

Hope this helps.

Cheers!

[SaShahParticipant]

it works… and i hope lots of people will take benefit from this forum.
Thank you so much

[LelyModerator]

You’re welcome Sashah!

Always,
X

[Author]

Posts