Return to previous page

How can I add search bar button in header part of the theme?

This topic has 10 replies, 3 voices, and was last updated 8 years, 10 months ago ago by Jack Richardson

AristaTechnologies

Participant

June 8, 2015 at 09:20

How can I add search bar button in header part of the theme?

I tried to add code for search bar in header.php but it didn’t work out.

Any help is appreciated.

#68465 Copied Theme version: 2.7.1 WooCommerce version: 4.2.2

9 Answers

Eva Kemp

Support staff

June 8, 2015 at 10:38

Hello,

Search form can be enabled in Theme Options > Header > Enable search form in header > On.

Regards,
Eva Kemp.

#68494 Copied

AristaTechnologies

Participant

June 8, 2015 at 11:12

I am using header variant-4 and as per your suggestion search bar will be enable in top bar..but we need in header part and don’t want to use in top bar.

#68504 Copied Theme version: 2.7.1 WooCommerce version: 4.2.2

Jack Richardson

Support staff

June 8, 2015 at 11:40

Hello,

Please try to use other type of header where search form is enabled by default.

Best regards,
Jack Richardson.

#68519 Copied

AristaTechnologies

Participant

June 9, 2015 at 08:10

Dear jack,

But I need the search button next to the menu navigation in header part only.

I don’t want in top bar.

We have already tried with custom coding in header.php but it didn’t work out.

Any help will be appreciated.

#68726 Copied Theme version: 2.7.1 WooCommerce version: 4.2.2

Eva Kemp

Support staff

June 9, 2015 at 09:27

Hello,

Please provide us with wp-admin panel credentials in private content.

Regards,
Eva Kemp.

#68755 Copied

AristaTechnologies

Participant

June 9, 2015 at 11:14

i need search box near Blog menu in menu bar. and I am using header variant-4

check this website http://www.mysticapparels.com.au/

Please, contact administrator
for this information.

#68786 Copied Theme version: 2.7.1 WooCommerce version: 4.2.2
Jack Richardson

Support staff

June 9, 2015 at 15:51
Hello,

I’ve added the following code in header.php:
```
<?php etheme_get_option('search_form') ?>
<div class="custom-search">
<span data-toggle="modal" data-target="#searchModal" class="search-link">search</span>
</div>
```
and the css code in custom.css:
```
.custom-search {
  position: absolute;
  left: 94%;
  top: 22px;
}
```
Please check your site. Is that what you want?

Best regards,
Jack Richardson.
#68892 Copied
AristaTechnologies

Participant

June 10, 2015 at 07:23

Dear Jack,

Thank you for your help,
Search bar is not visible in mobile view and visible in desktop but not working.
you already have my admin panels id and password.

and another problem is that Lookbook page mobile view is not responsive. any help will be appriates.

#68950 Copied Theme version: 2.7.1 WooCommerce version: 4.2.2
Jack Richardson

Support staff

June 11, 2015 at 01:15
Hello,

I’ve replaced your code in header.php with the following code:
<div class="desktop-search"><?php echo etheme_search(array()); ?></div>
and added css code to make desktop search form as yours. Please check it.

As for mobile version you can see that in our demo https://www.8theme.com/demo/legenda/ the search button is displaying in top bar when it’s enabled. In this case you can disable top bar for desktop view and enable it for mobile view by using the css code in custom.css:
```
.top-bar {
display: none;
}
@media (max-width: 768px){
.top-bar {
display: block !important;
}}
```
Note that you need to enable top bar in Theme Options > Header.

Please provide us with the screenshot with the Look Book page mobile view problem.

Best regards,
Jack Richardson.
#69180 Copied
Viewing 10 results - 1 through 10 (of 10 total)