Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1230900

    Hi All,

    I have recently been looking for a way to place the search bar in the header in the following arrangements. I wanted to provide some clear instructions as the documentation in the area is a little hard to follow, and other posts in the forum don’t quite work as expected.

    I have discovered that the Ajax dropdown looks at the position of the search bar – If the search bar is within the header area then the Ajax dropdown still applies to Enfolds default search widget.

    -Logo left, menu right, search bar next to logo in header
    -Logo left, menu below, search bar in header above menu next to logo
    -Logo Centre menu below, search bar in header above menu next to logo
    -Search can be modified following the guide linked below to include SKUs and only include products
    -Tip! Always set a feature image so the enfold default search results looks prettier!

    To make the default enfold search cover products only, follow my tutorial here: https://kriesi.at/support/topic/improved-search-for-woo-commerce/

    Add the search bar to the header area
    1. Set the desired header (logo, left, menu below etc).
    2. Disable the append search icon to main menu
    3. Add the following to the functions .php file:

    add_action( 'ava_before_bottom_main_menu', 'enfold_customization_header_widget_area' );
    function enfold_customization_header_widget_area() {
        dynamic_sidebar( 'header' );
    }

    4. Create a widget area called Header in the widgets section
    5. Add the default Search Widget

    6. Use the following CSS in the quick CSS box (play around with the mobile page breaks in chrome to confirm position works on all device sizes)
    7. Change the DIV ID to match the ID given to the search widget!

      /* Change the Div ID#search-4 to match the ID given to the new widget in the widget area */
      /* Large screens and desktop positioning */
    #search-4 {
        left: auto;
        right: 490px;
        padding: 0;
        position: absolute;
        top: 40px;
        transform: translate(-0%);
        z-index: 999999;
        width:400px;
    }
    
      /* Set the padding around the Ajax dropdown */
    .ajax_search_response {
    background:#ffffff;
    padding-top:20px;
    }
    
      /* Change background of search box */
    #top input[type='text'] {
    background-color:#ffffff !important;
    }
    
      /* Hide the search bar on mobiles and correct shopping cart position if necessary */
    @media only screen and (max-width: 989px) {
    #search-4 {
    display:none;
    }
    .cart_dropdown_link {
        line-height: 90px !important;
    }
    }
    
      /* Adjust the position of the search bar for desktops up to 1480px */
    @media only screen and (min-width: 989px) and (max-width: 1480px) {
      /* Add your Desktop Styles here */
    #search-4 {
        left: auto;
        width:280px;
        right: 400px;
    }
    }

    8. Assuming you have figured it out – Say thank you by visiting Think Jarvis Website
    9. Or Follow us on Facebook/Instagram! Think Jarvis Facebook

    • This topic was modified 1 year, 2 months ago by  thinkjarvis.
    #1231670

    Cheers Mike,

    The site I have this setup on is due to go live on Thursday/Friday. So I will post a link to it on here and the showcase once it is done.

    Adding the search bar to mobile menus
    Forgot to add – If you don’t set the Search bar to hide on mobiles, you can use CSS to have it on and working on mobiles as well, although I have not checked to see if the ajax search results work in this configuration. Likely be controlled and turned back on using CSS.

    My preferred mobile solution:
    I normally just add it to the top of the mobile menu (In the theme settings set a different menu for mobiles, add link to search page).

    Follow the instructions here for a working example of search added to the mobile menu:
    https://kriesi.at/support/topic/how-to-add-the-search-function-to-mobile-menus/

    #1292082

    Hi Thomas, great solution thanks for sharing! Can I ask for the CSS code to show the search bar also on mobile devices? Thanks!

    #1292200

    You would need to modify the rules so it remains on mobiles and also alter its position. The search bar is set to appear in front of the main menu so you would need to alter the height of the main menu to do this on mobiles. If I get time I’ll create a solution, but will be a while!

    Take a look at https://www.simplyneedlecraft.com and https://www.thehealthworkshop.co.uk and https://www.dunrichsoftfurnishings.co.uk

    My preferred mobile solution:
    I normally just add it to the top of the mobile menu (In the theme settings set a different menu for mobiles, add link to search page).
    Follow the instructions here for a working example of search added to the mobile menu:
    https://kriesi.at/support/topic/how-to-add-the-search-function-to-mobile-menus/

    You can always add the mobile menu to the top of the actual shop page by adding an extra widget area (see the three shop examples above). The UX experience tends to be better if you can get someone to go to the shop page first so you know their intent.

    #1292356

    Hi Thomas! Thanks for the quick reply .. the three sample sites are great, congratulations!
    Below I have put two images of an Italian site that uses Enfold and I would like to be able to create this effect for the search bar. As you can see in the mobile version it automatically positions itself in the lower part, making everything very nice to view and navigate.
    If you can solve it it would be very useful!
    A good Sunday to you and the Kriesi staff ;-)

    http://i.szoter.com/97cb2e9fb6c86c5f

    http://i.szoter.com/7aac0019faaad1e2

    #1292452

    Your screenshots have not worked. Can you try again?

    #1292457

    Hello Thomas, sorry that the links didn’t work, I don’t understand .. I’m putting these new ones back and they look ok :-)
    It would be fantastic to be able to understand how to make the floating search bar work even on a mobile device!

    http://i.szoter.com/dc20bcd2e44b23b4

    http://i.szoter.com/4a368fe11166ef62

    I noticed that this site uses the Max Mega Menu plugin which in the mobile version does not work as it seems that there is the Java script of Enfold that blocks that of the plugin .. it is likely that this search bar could be from this plugin.
    The developers give this solution but I have been trying to make it work for 3 days without success: – ((

    • This reply was modified 5 months, 3 weeks ago by  elfuego1340.
    #1292806

    Hi,

    Thanks for sharing Thomas!

    @elfuego1340 we replied to your thread here – https://kriesi.at/support/topic/search-bar-in-header-help/. If you need further assistance, let us continue there.

    Best regards,
    Yigit

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

You must be logged in to reply to this topic.