Reply To: Positioning Search Box on Homepage

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

#9635

GraniteIndustries
Participant

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.