[GraniteIndustries]

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

[GraniteIndustries]

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!

[GraniteIndustries]

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!

[GraniteIndustries]

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

[Author]

Posts