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.
Site URL: hidden Theme version: 2.7.1 WooCommerce version: 4.2.2I 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.
Theme version: 2.7.1 WooCommerce version: 4.2.2Hello,
Please try to use other type of header where search form is enabled by default.
Best regards,
Jack Richardson.
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.
Theme version: 2.7.1 WooCommerce version: 4.2.2i need search box near Blog menu in menu bar. and I am using header variant-4
check this website http://www.mysticapparels.com.au/
Theme version: 2.7.1 WooCommerce version: 4.2.2Hello,
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.
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.
Theme version: 2.7.1 WooCommerce version: 4.2.2Hello,
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 http://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.
You must be logged in to reply to this topic.Log in/Sign up
One standard license is valid only for 1 project. Running multiple projects on a single license is a copyright violation.
The message was successfully sent
Your shopping cart is empty
You may extend support period on ThemeForest and then update its status by clicking "Update" button in your Account area.
Purchase code | Expiration date |
---|---|
817e8a3b-18c8-492c-8ba6-9188c27b0995 | 05 Jan 2017 |