Positioning Search Box on Homepage

[GraniteIndustriesParticipant]

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.

[Ernest MarcinkoKeymaster]

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 :)

[GraniteIndustriesParticipant]

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

[Ernest MarcinkoKeymaster]

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 :)

[GraniteIndustriesParticipant]

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.

[Ernest MarcinkoKeymaster]

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 :)

[GraniteIndustriesParticipant]

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!

[Ernest MarcinkoKeymaster]

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 :)

[GraniteIndustriesParticipant]

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.

[Ernest MarcinkoKeymaster]

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 :)

[Author]

Posts