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

9 replies3 participantsUpdated by Jack Richardson

  • Avatar: AristaTechnologies
    AristaTechnologies
    Participant

    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

    Avatar: Eva
    Eva Kemp
    Participant

    Hello,

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

    Regards,
    Eva Kemp.

    #68494 Copied
    Avatar: AristaTechnologies
    AristaTechnologies
    Participant

    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
    Avatar: Jack Richardson
    Jack Richardson
    Support staff

    Hello,

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

    Best regards,
    Jack Richardson.

    #68519 Copied
    Avatar: AristaTechnologies
    AristaTechnologies
    Participant

    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
    Avatar: Eva
    Eva Kemp
    Participant

    Hello,

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

    Regards,
    Eva Kemp.

    #68755 Copied
    Avatar: AristaTechnologies
    AristaTechnologies
    Participant

    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
    Avatar: Jack Richardson
    Jack Richardson
    Support staff

    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
    Avatar: AristaTechnologies
    AristaTechnologies
    Participant

    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
    Avatar: Jack Richardson
    Jack Richardson
    Support staff

    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

Want to reply? Log in, or register with your ThemeForest purchase code, to reply to this topic.

Login / Register