Viewing 3 posts - 1 through 3 (of 3 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 3 months, 1 week ago by  thinkjarvis. Reason: sounded harsh! Sorry!
    • This topic was modified 3 months, 1 week ago by  thinkjarvis.
    • This topic was modified 3 months, 1 week ago by  thinkjarvis.
    • This topic was modified 3 months, 1 week ago by  thinkjarvis.
    • This topic was modified 3 months, 1 week ago by  thinkjarvis.
    #1231597

    Hey Thomas,
    Thank you for sharing your solution, I’m sure it will help others. Thanks for using Enfold.

    Best regards,
    Mike

    #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/

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

You must be logged in to reply to this topic.