Tagged: ,

Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • #809342

    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
    Maciej

    #810758

    Hey 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,
    Ismael

    #810937

    Hello, how can i add the search bar before the social icon?

    Thanks

    D.

    pic

    #810966

    Hello.

    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
    Maciej

    #811094

    Hi 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,
    Victoria

    #812456

    Can 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
    Maciej

    #812616

    Hi,

    Please, to check your problem easier, may you provide to us your WP credentials?

    Best regards,
    John Torvik

    #812954

    Hello.
    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
    Maciej

    • This reply was modified 2 years, 5 months ago by  Maciej.
    #813057

    concerning 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 ?

    #813099

    Thanks, but I need search field that is visible, not just icon. Same as you get when you use search widget inside widget area.

    #813130

    sorry that was an answer to csogordaniel

    #813376

    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,
    Victoria

    #813606

    Hello. 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!

    #814294

    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,
    Victoria

    #814295

    Hi 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,
    Victoria

    #814317

    Hello, 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

    #816148

    Hi!

    Thank you for the update.

    I can’t reproduce the issue described in the screenshots. The position of the search form looks a little awkward though. Maybe, you should move it to the right side of the header, above the menu items, instead of the center.

    Regards,
    Ismael

Viewing 17 posts - 1 through 17 (of 17 total)

You must be logged in to reply to this topic.