Nav Search in top bar

i’d like to place the search bar inside the top bar navigation on the right side. now i already made a copy of the includes inside my child theme but what files do i have to modify? or is there a function to place the search inside the top bar navigation? could you please assist me here or is that beyond support? thanks!

Hey Peter,

You could try hooking to the fl_top_bar_col* action, then call FLTheme::nav_search();. Check out the link below for more info re theme actions.
http://forum.wpbeaverbuilder.com/knowledge-base/theme-action-reference/

You’re gonna need to add some additional styling though. Let us know if you need help with the above. :slight_smile:

Ben

i’d like to use

function my_top_bar_col1_open() {
    echo "Search Bar inside top col1";
} 
add_action( 'fl_top_bar_col1_open', 'my_top_bar_col1_open' );

Could you please assist me with echoing the php from the includes nav-search?

<div class="fl-page-nav-search">
	<a href="javascript:void(0);" class="fa fa-search"></a>
	<form method="get" role="search" action="<?php echo home_url(); ?>" title="<?php echo esc_attr_x( 'Type and press Enter to search.', 'Search form mouse hover title.', 'fl-automator' ); ?>">
		<input type="text" class="fl-search-input" name="s" class="form-control" value="<?php echo esc_attr_x( 'Search', 'Search form field placeholder text.', 'fl-automator' ); ?>" onfocus="if (this.value == '<?php echo esc_attr_x( 'Search', 'Search form field placeholder text.', 'fl-automator' ); ?>') { this.value = ''; }" onblur="if (this.value == '') this.value='<?php echo esc_attr_x( 'Search', 'Search form field placeholder text.', 'fl-automator' ); ?>';">
	</form>
</div>

Hey Peter,

Try the code below and see if it works for you. You’ll have to adjust the default styling though.

function my_top_bar_col1_open() {
  FLTheme::nav_search();
} 
add_action( 'fl_top_bar_col1_open', 'my_top_bar_col1_open' );

Ben

Great, thanks Ben :slight_smile:

it’s actually pretty simple. need to adjust styling and hide the search inside the main nav bar with display none. is there a better solution than hiding the main nav search with css?

.fl-page-nav-search a.fa-search {
    bottom: 0;
    font-size: 16px;
    left: 0;
    padding: 4px 0;
    top: 0;
}
nav .fl-page-nav-search {
    display: none;
}

Hi Peter,

You can disable the Nav search via the Customizer > Header > Nav Layout > Nav Search Icon and select disable.

Actually, that won’t work, as you’re calling it in the code provided by Ben. So if you do not want to use CSS to hide it. You will need to use a child theme and remove or comment out FLTheme::nav_search(); from the nav-x.php (x being the layout you’re using) template.

Thanks,
Danny