Insert html / javascript / iframe in header

Hello,

regarding to header, I would like to insert an affiliate iframe or javascript (full width as wrap) just before the nav bar. Can you plaese help me with this.
My site is http://www.flightfindair.com

Thank you so much

https://colorlibsupport.com/t/change-location-of-navigation-bar/#post-46314
@Movin: sorry for the off topic, just realized later on where to start a new thread

Hi @flightfindair,

I hope you are well today and thank you for your question.

You can try achieving this by using the attached custom child theme of Travelify theme that contains some custom code.

In the attached child theme functions.php file you will find the following code on line number 99 which you can replace with iframe or javascript code.

Add your iframe or javascript code here.

Best Regards,
Movin

Hi Movin,

Thank you…

You are most welcome here :slight_smile:

I think this sounds like something I could use. I’ve got a logo on the left side of my header and would like a simple paragraph of text on the right. For mobile, they should be displayed sequentially. I added the text I found in the functions.php file from this child theme into the functions.php of the child theme I’m using and added my paragraph of text.

I’m uploading the functions.php file of my travelify child theme, which is activated. The paragraph is not displaying the right of my header. Any idea why not?

The site is primehomeinspections.net
Thanks so much for your help.

Hi Movin,

It works well, only one thing needs to be done. I inserted a serch form, but when you want to type in dates its popup window appears behind the slider so you can not see the date you want to choose. Can you please help me with this to make search form’s date window visible and how to bring it infront os Slider.

Thank you
www.flightfindair.com

I see it didn’t upload my page, so here’s the function I inserted:

function custom_travelify_headerdetails() {
?>
<?php
global $travelify_theme_options_settings;
$options = $travelify_theme_options_settings;

$elements = array();
	$elements = array(
		$options[ 'social_facebook' ],
		$options[ 'social_twitter' ],
		$options[ 'social_googleplus' ],
		$options[ 'social_linkedin' ],
		$options[ 'social_pinterest' ],
		$options[ 'social_youtube' ],
		$options[ 'social_vimeo' ],
		$options[ 'social_flickr' ],
		$options[ 'social_tumblr' ],
		$options[ 'social_instagram' ],
		$options[ 'social_rss' ],
		$options[ 'social_github' ]
	);

	$flag = 0;
	if( !empty( $elements ) ) {
		foreach( $elements as $option) {
			if( !empty( $option ) ) {
				$flag = 1;
			}
			else {
				$flag = 0;
			}
			if( 1 == $flag ) {
				break;
			}
		}
	}
?&gt;

&lt;div class="container clearfix"&gt;
	&lt;div class="hgroup-wrap clearfix"&gt;
				&lt;section class="hgroup-right"&gt;
					&lt;?php travelify_socialnetworks( $flag ); ?&gt;
				&lt;/section&gt;&lt;!-- .hgroup-right --&gt;
			&lt;hgroup id="site-logo" class="clearfix"&gt;
				&lt;?php
					if( $options[ 'header_show' ] != 'disable-both' &amp;&amp; $options[ 'header_show' ] == 'header-text' ) {
					?&gt;
						&lt;h1 id="site-title"&gt;
							<a>" title="&lt;?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?&gt;" rel="home"&gt;
								&lt;?php bloginfo( 'name' ); ?&gt;
							</a>
						&lt;/h1&gt;
						&lt;h2 id="site-description"&gt;&lt;?php bloginfo( 'description' ); ?&gt;&lt;/h2&gt;
					&lt;?php
					}
					elseif( $options[ 'header_show' ] != 'disable-both' &amp;&amp; $options[ 'header_show' ] == 'header-logo' ) {
					?&gt;
						&lt;h1 id="site-title"&gt;
							<a>" title="&lt;?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?&gt;" rel="home"&gt;
								<img />" alt="&lt;?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?&gt;"&gt;
							</a>
						&lt;/h1&gt;
					&lt;?php
					}
					?&gt;

			&lt;/hgroup&gt;&lt;!-- #site-logo --&gt;

	&lt;/div&gt;&lt;!-- .hgroup-wrap --&gt;
&lt;/div&gt;&lt;!-- .container --&gt;
    &lt;div class="container clearfix"&gt;
        &lt;p style="float: right; text-align: right;"&gt;&lt;span style="font-size: 20px; color: red;"&gt;Gerald Siconolfi&lt;/span&gt;&lt;br&gt;
        (585) 441-4774&lt;br&gt;
          <a href="mailto:[email protected]">[email protected]</a>&lt;br&gt;
        Prime Home Inspection Services, LLC &lt;br&gt;
        New York State License #16000059520 &lt;/p&gt;
    &lt;/div&gt;
&lt;?php $header_image = get_header_image();
		if( !empty( $header_image ) ) :?&gt;
			<img />" class="header-image" width="&lt;?php echo get_custom_header()-&gt;width; ?&gt;" height="&lt;?php echo get_custom_header()-&gt;height; ?&gt;" alt="&lt;?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?&gt;"&gt;
		&lt;?php endif; ?&gt;
&lt;?php
	if ( has_nav_menu( 'primary' ) ) {
		$args = array(
			'theme_location'    =&gt; 'primary',
			'container'         =&gt; '',
			'items_wrap'        =&gt; '&lt;ul class="root"&gt;%3$s</ul>'
		);
		echo '&lt;nav id="main-nav" class="clearfix"&gt;
				&lt;div class="container clearfix"&gt;';
			wp_nav_menu( $args );
		echo '&lt;/div&gt;&lt;!-- .container --&gt;
				&lt;/nav&gt;&lt;!-- #main-nav --&gt;';
	}
	else {
		echo '&lt;nav id="main-nav" class="clearfix"&gt;
				&lt;div class="container clearfix"&gt;';
			wp_page_menu( array( 'menu_class'  =&gt; 'root' ) );
		echo '&lt;/div&gt;&lt;!-- .container --&gt;
				&lt;/nav&gt;&lt;!-- #main-nav --&gt;';
	}
?&gt;
	&lt;?php
	if( is_home() || is_front_page() ) {
		if( "0" == $options[ 'disable_slider' ] ) {
			if( function_exists( 'travelify_pass_cycle_parameters' ) )
			travelify_pass_cycle_parameters();
		if( function_exists( 'travelify_featured_post_slider' ) )
			travelify_featured_post_slider();
	}
	}

	else {
		if( ( '' != travelify_header_title() ) || function_exists( 'bcn_display_list' ) ) {
	?&gt;
		&lt;div class="page-title-wrap"&gt;
    		&lt;div class="container clearfix"&gt;
    			&lt;?php
	    		if( function_exists( 'travelify_breadcrumb' ) )
					travelify_breadcrumb();
				?&gt;
			   &lt;h3 class="page-title"&gt;&lt;?php echo travelify_header_title(); ?&gt;&lt;/h3&gt;&lt;!-- .page-title --&gt;
			&lt;/div&gt;
    	&lt;/div&gt;
   &lt;?php
   	}
	}

}

Hi @Wbgrosh,

To help us keep support thread separates could you please create your own thread for your question here https://colorlibsupport.com/c/travelify-support/ instead of replying on others thread as it makes the thread messy and hard to read.

If you want to you can also add reference of this thread in your newly created thread.

We would be more than happy to help you on your new thread.

Cheers,
Movin

Hi @flightfindair,

You can try resolving datepicker issue by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Travelify Other Options

div#ui-datepicker-div {
    z-index: 9999 !important;
}

Best Regards,
Movin

Hi Movin,

Thanks for the quick reply. Works well.
Thanks again.

Regards
Csaba @flightfindair

Hi Movin,

Could you please do it with the “From/To” autocomplete aswell?
Thanks

Csaba @flightfindair

You are most welcome here :slight_smile:

Could you please do it with the “From/To” autocomplete aswell?

Just use the below CSS code to make it work for “From/To” fields.

ul.ui-autocomplete.ui-menu.ui-widget {
    z-index: 9999 !important;
}

Thanks a million Movin :slight_smile:

You are most welcome here :slight_smile: