Hi Jordan,
Sorry to hear you’re having problems. I’m afraid both of these troubles aren’t really within the remit of this plugin; they are theming issues usually solved using css. Therefore, they aren’t features of this plugin and themes should be used to fulfil these areas.
For the centring question, I can’t offer much in terms of assistance as I’m not entirely sure what you’re after or the context of the search box and menu. All I can suggest is playing around with some css and see if it works out through trial and error – centring, particularly vertically, can be somewhat tricky. Possible solutions may be to use widths/margins, table display, or a flexbox. Best to do a few google/stack overflow searches.
To change the button to a magnifying glass, there are, once again, a few ways of doing this. One way would be to use css that gives the submit input a background-image of a magnifying glass and set the text color to transparent. Alternatively, you could insert html using the hooks provided by this plugin:
add_filter( 'bop_nav_search_show_submit_button', function( $show, $item, $depth, $args ){
?>
<button type="submit" class="search-submit">
<img src="URL_TO_MAG_GLASS" aria-hidden="true"><!-- image method -->
<!-- <i class="fa fa-search" aria-hidden="true"></i><!-- font awesome icon method -->
<span class="search-submit-title">
<?php echo apply_filters( 'bop_nav_search_the_title', $item->title, $item, $depth, $args ); ?>
</span>
</button>
return false;
}, 10, 4 );
This’ll make the submit field a button rather than an input (a very minor difference). It’ll also insert a magnifying glass image before the submit text (I’ve also added in comments the method for using font awesome).
You would need to add this php to your theme’s functions.php file. If you’re using a third party plugin, you may well want to create a child theme to ensure updates do not overwrite your bespoke code (you could also create your own plugin, which may actually be easier).
Also, you’d probably want to give the search-submit-title class properties that make it only visible to screen readers.
Here are some helpful links to related topics: screen reader text, custom css, some examples of css based on this plugin’s output.
Hope this helps. Let me know if you need further assistance.
Cheers,
Joe
