Positioning Search Box on Homepage

Home Forums Product Support Forums Ajax Search Pro for WordPress Support Positioning Search Box on Homepage

This topic contains 9 replies, has 2 voices, and was last updated by

 
Keymaster
4 years, 8 months ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #9626

    I have been trying to use Ajax Lite and now have Ajax PRO.

    I have been successful in getting the search on my page but am having trouble formatting the position of the search box.

    I would like it to be in a fixed position below the header. I’ve attached a photo showing where I would like it to be placed.

    The search also seems not be allowing me to type in it right now.

    I’ve spent two days trying to integrate the search to our site. I hope you can help.

    Thanks,

    Jeremy

    Attachments:
    You must be logged in to view attached files.
    #9629

    Hi Jeremy,

    Looking at your site, I would probably position the wrapper element to a fixed position first with this custom CSS:

    div.et_search_outer {
        overflow: hidden;
        position: fixed;
        width: 400px;
        right: 7px;
        top: 100px;
    }

    Then change the width of the search to fill this element:

    .asp_main_container {
        width: 100% !important;
    }

    This should be a good starting point 🙂

    Best,
    Ernest Marcinko

    If you like my products, don't forget to rate them on codecanyon :)


    #9631

    Thanks! that seemed to solve the problem.

    Two more quick questions..
    1. Is it possible to remove the search settings option completely? I think it will confuse our customers more than help them
    2. Do you have any minimalist suggestions for search on mobile? Part of the redesign we went under was to optimize our mobile. The search at the top looks great on desktop but on mobile it is out of position, I’ve considered a search in the menu bar and a search at the bottom of the page. Or a search magnifying glass that opens up into a search. Do you have any suggestions or things that have worked in the past?

    Thanks,

    Jeremy

    #9632

    Hi!

    Well, it’s a theme/implementation related problem, but I can give you suggestions of course.

    1. Yes, on the Frontend Search Settings -> General panel, first option: https://i.imgur.com/toueGGG.png
    2. In that case I would do one of the following:
    i.) Use a media query to adjust the width and the position on mobile devices. For example:

          @media only screen 
            and (min-device-width: 320px) 
            and (max-device-width: 480px) {
              div.et_search_outer {
                width: 280px;
              }
          }

    ii.) or maybe use the compact layout mode: Compact layout in the documentation

    iii.) Another possible solution is a mixture of the previous two: use the current search instance on desktop and make another one for mobile, with the compact layout. In that case, I would use this CSS to hide the first one on mobile, and the second one on desktop:

    @media only screen 
      and (min-device-width: 320px) 
      and (max-device-width: 480px) {
        div[id*='ajaxsearchpro1_'] {
          display: none !important;
        }
        div[id*='ajaxsearchpro2_'] {
          display: inline-block !important;
        }
    }
    
    @media only screen 
      and (min-device-width: 481px) {
        div[id*='ajaxsearchpro1_'] {
          display: block !important;
        }
        div[id*='ajaxsearchpro2_'] {
          display: none !important;
        }
    }

    In my opinion these are the best possible solutions.

    Best,
    Ernest Marcinko

    If you like my products, don't forget to rate them on codecanyon :)


    #9635

    Thanks so much for the help!

    I attempted to implement the above code and had mild success. However the issues seems to be, where do I place the short code for the mobile search in my header.php file. Below is my header with code. If I place it next to the shortcode used for my desktop.

    <span class=”mobile_menu_bar et_pb_header_toggle et_toggle_<?php echo esc_attr( et_get_option( ‘header_style’, ‘left’ ) ); ?>_menu”></span>
    <?php endif; ?>

    <?php if ( ( false !== et_get_option( ‘show_search_icon’, true ) && ! $et_slide_header ) || is_customize_preview() ) : ?>
    <div id=”et_top_search”>
    <span id=”et_search_icon”></span>
    </div>
    <?php endif; // true === et_get_option( ‘show_search_icon’, false ) ?>

    <?php do_action( ‘et_header_top’ ); ?>
    </div> <!– #et-top-navigation –>
    </div> <!– .container –>
    <div class=”et_search_outer”>
    <?php echo do_shortcode(‘[wd_asp id=1]‘); ?>
    <?php echo do_shortcode(‘[wd_asp id=2]‘); ?>

    </div>

    </header> <!– #main-header –>

    <div id=”et-main-area”>

    This is the custom CSS code I added to the Custom css section of the Divi Theme:

    @media only screen
    and (min-device-width: 320px)
    and (max-device-width: 480px) {
    div[wd_asp id=1] {
    display: none !important;
    }
    div[wd_asp id=2]{
    display: inline-block !important;
    }
    }

    @media only screen
    and (min-device-width: 481px) {
    div[wd_asp id=1] {
    display: block !important;
    }
    div[wd_asp id=2] {
    display: none !important;
    }
    }

    Attached are the screen shots.

    What am I missing to get the compact search showing on mobile only?

    Thanks again!

    Attachments:
    You must be logged in to view attached files.
    #9638

    Hi!

    If the compact layout is set to “fixed” then it does not matter where it’s placed, it will always stay fixed in one position anyways. I usually recommend placing it into the theme footer.php file, just before the closing body tag.

    The issue here is the custom CSS, the one you are using is incorrect. For example the rules starting with these types of statements:

    div[wd_asp id=1]

    This doesn’t work like that in CSS language. Use exactly the one I suggested instead, it should work.

    Best,
    Ernest Marcinko

    If you like my products, don't forget to rate them on codecanyon :)


    #9656

    Thanks again for the help. I corrected the CSS code and it is loading on the page.

    Two things.
    – The compact search is not showing the icon in compact mode. It is showing the entire search bar.
    – I’m fine with it showing the entire bar if it is attached to the header at the top of the page and not floating down the page. Our header stays in place on our mobile site.
    – Or if it is going to float down the page, then to just have the search icon showing.

    Thanks!

    #9666

    My bad, the problem is with one of my previous suggestions. Please change this CSS code:

    .asp_main_container {
        width: 100% !important;
    }

    to this:

    div.ajaxsearchpro[id*="ajaxsearchpro1_"] {
        width: 100% !important;
    }

    and it should fix the issue immediately.

    Best,
    Ernest Marcinko

    If you like my products, don't forget to rate them on codecanyon :)


    #13045

    Hi,

    We updated our PHP from 5.6 to 7.0 and the search bars jumped around the page. The mobile or compact search bar is showing on the home page and the long desktop search bar moved to the far left corner. Do you know what would cause this? I checked the header.php tab and it looks correct and the custom CSS looks to be working as well.

    Thanks!

    Jeremy

    Attachments:
    You must be logged in to view attached files.
    #13056

    Hi Jeremy,

    It’s hard to tell, because I can’t see that search bar on the page anymore. My guess would be that if you use any cache, that might need clearing, including page, asset, CDN or anything you have. Jumping a PHP version should not be a problem, as it’s backwards compatible with previous PHP versions (aside from some very rare features).

    Also, make sure that the custom CSS codes are still there, they might have been removed for some reason.

    Best,
    Ernest Marcinko

    If you like my products, don't forget to rate them on codecanyon :)


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

The topic ‘Positioning Search Box on Homepage’ is closed to new replies.