-
Posts
-
Hello.
I would like to have search field in top area of my page. Right now, i managed to get it working using other posts here.
I used widget method (http://kriesi.at/documentation/enfold/adding-a-widget-area-to-the-header/) to get widget bar on top of my page and then search widget inside.
Then i used styles to get this in place:#header .widget { left: 50%; padding-top: 10px; width: 250px; position: relative; top: 0; transform: translate(-50%); z-index: 999; } #search-2 { padding-bottom: 5px; } #top #searchform .ajax_search_response { z-index: 999 !important; background: white; position: absolute; } .header-scrolled #search-2 { display: none; }Most of it works but:
1. Im not sure if position: relative is ok for mu widget and position: absolute is ok for results. If I set position: absolute (as you mentioned in one of the posts (https://kriesi.at/support/topic/issues-related-to-search-bar/) my widget is over menu and doesn’t work like top bar (with phone and social icons). When I remove position absolute from search_response, search results are moving whole page down.
2. How can I manage to get my search bar to behave like top bar (with phone, mail and phone) ?
3. If you type something into search, and get some results, field with results stays forever open. How can I make it to diaper after clicking outside?
4. How can I change that sidebar (or append it to top bar) to behave like top bar? It stays on top of main menu, it hides when user scrolls down (or get nice animation/transition like I have in main menu/logo area).Im not sure if this method is the best one, I would like to get this to work without messing with code too much to avoid any problems. All is done inside functions.php:
add_filter('avf_form_message', 'avf_form_message_mod_checkbox', 10, 3); function avf_form_message_mod_checkbox($message, $new_post, $form_params) { $message = str_replace('true', 'Tak', $message); $message = str_replace('false', 'Nie', $message); return $message; } add_action( 'ava_main_header', 'enfold_customization_header_widget_area' ); function enfold_customization_header_widget_area() { dynamic_sidebar( 'header' ); }This is almost done but need some polishing :)
Thank you very much!
Best regards
MaciejHey rimlightstudio,
Thank you for using Enfold.
Could you please provide a screenshot of the layout that you have in mind? Instead of adding the search field inside a widget, try to use the “avia_meta_header” hook with the “get_search_form” function.
add_filter( 'avf_execute_avia_meta_header', '__return_true', 10, 1); add_filter( 'avia_meta_header', 'avia_append_search_nav_mod'); function avia_append_search_nav_mod() { $form = get_search_form(false); $items = '<div id="menu-item-search" class="menu-item-search-mod menu-item menu-item-search-dropdown">'; $items .= $form; $items .= '</div>'; echo $items; }Best regards,
IsmaelHello.
Thank you. That code works nice but there are some styling issues.
1. When I type something and results are displayed, whole field is pulled down. It would be great to have resluts field apeared over menu and page content.
2. In normal situation when I click outside search field or results field, that field should disapear. Right now it stays until I refresh page.3. I would like to center my search field and make it a bit bigger/wider. I have code like this now:
.sub_menu { top: 0; left: -50%; }but Im not sure if this is correct (-50% place it to far left) and I can’t find proper class to make field wider.
4. When you open that page on mobile phone (tested on iphone 6s), search field is smaller then search button. On desktop everything is ok. I have code extra code like that:
#header_meta { min-height: 40px; background: transparent; }Best regards
MaciejHi csogordaniel,
Could you please start a separate thread, describe your issue there and give us a link to your website. Just to avoid confusion.
Best regards,
VictoriaCan you check that please? Right now I have default configuration, no extra css with my search field at top. Please switch to PL language to see it. I can’t find proper class to make it wider and to get that to look ok as I described before.
Thank you.Best regards
MaciejHi,
Please, to check your problem easier, may you provide to us your WP credentials?
Best regards,
John TorvikHello.
Sure, login details are below. Please be careful, this is live site.To sum it up:
1. Wider search form (it would be great to set it as responsive value like %). Min width 300px or so.
2. Hiding search results are not working when I click outside search field. They stay until page is reloaded.
3. Right now, on mobile devices (tested on iPhone 6s) search field is smaller than search submit button.
4. I can’t center it properly. I have right now something like left: 42%. It works but Im not sure if it is ok.
Right now everything is done on polish language (PL). So inside admin panel please switch to polish. Later on eveysthing will be copied to other languages. Your language for account is set to english.All CSS rules are in General Styling tab (PL) at bottom of CSS field. Code that you provided is located in functions.php.
Thank you!Best regards
Maciejconcerning to ismael – why not taking the zoom icon on top?
This to functions.php of child-theme:add_filter( 'avf_execute_avia_meta_header', '__return_true', 10, 1); add_filter( 'avia_meta_header', 'avia_append_search_nav_mod'); function avia_append_search_nav_mod() { global $avia_config; ob_start(); get_search_form(); $form = htmlspecialchars(ob_get_clean()) ; $items .= '<div id="menu-item-search" class="noMobile menu-item menu-item-search-dropdown menu-item-avia-special"> <a href="?s=" data-avia-search-tooltip="'.$form.'" '.av_icon_string('search').'><span class="avia_hidden_link_text">'.__('Search','avia_framework').'</span></a> </div>'; echo $items; }this to quick.css:
#top #header_meta #menu-item-search { list-style: outside none none; }look here on top: https://webers-testseite.de/
by the way ismael – isn’t possible to add the list point into the sub-menu ?
Thanks, but I need search field that is visible, not just icon. Same as you get when you use search widget inside widget area.
Hi Maciej,
@rimlightstudio
Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css@media only screen and (max-width: 450px) { #header_meta nav { float: left; } #top #header_meta nav #menu-item-search { float: left; width: 100%; } }If you need further assistance please let us know.
Best regards,
VictoriaHello. Can I kindly ask you to read my previous post again? I don’t want to set this search bar on left. I need to make it work like regular search bar in sidebar, just on top of a page. Please have a look again.
To sum it up:
1. Wider search form (it would be great to set it as responsive value like %). Min width 300px or so.
2. Hiding search results are not working when I click outside search field. They stay until page is reloaded.
3. Right now, on mobile devices (tested on iPhone 6s) search field is smaller than search submit button.
4. I can’t center it properly. I have right now something like left: 42%. It works but Im not sure if it is ok.
Right now everything is done on polish language (PL). So inside admin panel please switch to polish. Later on eveysthing will be copied to other languages. Your language for account is set to english.All CSS rules are in General Styling tab (PL) at bottom of CSS field. Code that you provided is located in functions.php.
Thank you!Hi rimlightstudio,
The code I gave you centers the search input and makes it wider on mobile. It seemed to me that’s what you wanted in 4.
You could add the code like this to have it right in the center.
@media only screen and (max-width: 450px) { #header_meta nav { float: left; } #top #header_meta nav #menu-item-search { float: left; width: 100%; } #top #searchform>div { max-width: initial !important; } } #top .sub_menu { width: 30%; left: 35%; }Best regards,
VictoriaHi rimlightstudio,
Hiding search results works in other languages, when the search is in the menu, so something is wrong wi the Polish version.
Best regards,
VictoriaHello, yes, but center in all screens, not only on mobile, so I think I can remove media only ant I will be fine. It works now, it i responsive and size is ok. Thank you.
On other languages search is not ready yet. Only PL language is in progress right now. After everything will be ok on PL language we will transfer to other languages. Rest is with older search in menu (that of course works as it should) but I would like to remove search from MENU and move it to top page as search filed (like on PL language). Otherwise I wouldn’t ask.
So only thing left now is hiding search results after clicking away from search field.Right now I have this class active:
And with that class, my search results are over page content but I can’t hide them after clicking away (I can do it in regular search).
With that class removed search results are moving whole content down.
One thing I changed, is position absolute, to make search results appear over content. I believe I took that css code from other topic about search results in top menu.
Thank you.
Best regards
Maciej
- You must be logged in to reply to this topic.