Home › Forums › Product Support Forums › Ajax Search Pro for WordPress Support › Positioning Search Box on Homepage › Reply To: Positioning Search Box on Homepage
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!