so sorry now – here stops my support.
i see there is on phone-info field always that shortcode inserted thing. Maybe this is from the do_php_shortcode_fix in your functions.php.
i guess you have to wait here for mods to login to your developement site to see what is the thing. On my test page it works this way – so there must be some inconsitencies. Sorry – i have to do my work now.

first of all : on your code here there is the closing a – tag missing: https://kriesi.at/support/topic/how-to-insert-search-form-into-header_posline-next-to-phone-number/#post-1046245

i can see here that there was an entry on phone-info field:

And you are still on enfold 4.4.1 i don’t know when it starts to name the top-menu avia2-menu but on your code there is no avia2-menu

so try to change the code above from
$('#header_meta #menu-item-search').prependTo('#avia2-menu');
to:
$('#header_meta #menu-item-search').prependTo('#header_meta .sub_menu');

and see what happens

i can see your dev page – and that is definitly from the shortcode. Maybe it is an caching problem.
Look to the phone info input field and to your functions.php

you only have to use one of the methods. if you use the code above get rid of the shortcode function and remove from phonenumber input field the [search]

add_filter( 'avf_execute_avia_meta_header', '__return_true', 10, 1);
add_filter( 'avia_meta_header', 'avia_append_search_nav_mod');
function avia_append_search_nav_mod(){
          global $avia_config;
          ob_start();
          get_search_form();
          $form =  htmlspecialchars(ob_get_clean()) ;

          $items .= '<li id="menu-item-search" class="noMobile menu-item menu-item-search-dropdown menu-item-avia-special">
                        <a href="?s=" data-avia-search-tooltip="'.$form.'" '.av_icon_string('search').'>
                          <span class="avia_hidden_link_text">'.__('Search','avia_framework').'</span>
                        </a>
                    </li>
					<li class="phone-info">
					   <a href="tel:+6123278777">07 3237 8777</a>
					</li>';

    echo $items;
}

function custom_shift(){
?>
<script>
(function($){
	$('#header_meta .phone-info').prependTo('#avia2-menu');
	$('#header_meta #menu-item-search').prependTo('#avia2-menu');
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'custom_shift');

And it is hard to say from a screenshot where it could come from. A life link – which you do not have now – will be more informative.

PS : for me it looks like the small one is from the code above and the other one from the shortcode.
You have to style the little one via css.
The code from me above with the phone number inserted this way is for having your search icon infront of the phonenumber. Then the phonenumber is part of the top menu. And you have to leave the phone info field empty on Enfold.

• This reply was modified 6 years, 6 months ago by Guenni007.

do you want it on the img itself or as an additional class to the span.logo ( this contains the link and the logo img) ?

if you like to have it on the img itself you can add this to your child-theme functions.php:

function add_class_to_logo_img(){
?>
<script>
(function($){
      $('.logo img').addClass('custom-class');
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'add_class_to_logo_img');

PS: by the way, the function name is arbitrary, but I always advise you to choose meaningful names, so that you remember afterwards what the code was still for.

well Enfold includes for some animation allready the waypoint function. On some cases this will be a good thing to control animation on scroll position dependencies.
f.e. : you can see on this page that some h3 headings gets red font when scrolling down – scrolling up will make them again black.
On scrolling down some p-tags content is getting red: https://webers-testseite.de/datenschutzerklaerung/

On this page the images ( sorry for the quick and dirty way – the resolution is bad on growing up) are sized to 100% container width.:
https://webers-testseite.de/ostler/beispiel-seite/

the last page is with this code to guide you in that direction i think you can do some similar effects on scrolling down:

add_action('wp_footer', 'scroll_up_down_change', 9999);
function scroll_up_down_change() {
?>
<script>
(function($) {
    var element_to_animate = $('img.grow');
        element_to_animate.waypoint(function(direction) {
           if (direction === 'down') { $(this.element).css({
			'max-width': '100vw',
            'width': '100%',
			'transition': 'width 1s',
            });
         }
        }, { offset: '20%'});   
    element_to_animate.waypoint(function(direction) {
           if (direction === 'up') { $(this.element).css({
			'max-width': '100vw',
            'width': '100px',
			'transition': 'width 1s',
            });}
        }, {offset: '20%'});
})(jQuery);
</script>
<?php
}

so maybe you can look what you can do with the waypoint function to create some new stunning effects

• This reply was modified 6 years, 6 months ago by Guenni007.

well if you use the shortcode only – you might not use the shift. Because the Position is on that method right.

so get rid of :

function custom_shift(){
?>
<script>
(function($){
    $('#header_meta #menu-item-search').prependTo('#avia2-menu');
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'custom_shift');

but the reason why i would use the other method is – the look and feel of the results list.
Try first that – as you like and see what i mean on your own installation.

___________

PS: on top you have outcommented the part of header widget area:
the code is a whole part of:

add_action( 'ava_main_header', 'enfold_customization_header_widget_area' );
function enfold_customization_header_widget_area() {
  dynamic_sidebar( 'header' );
}

you have a # infront of the add_action part

____________

PPS:
you can have your own backlink instead fo kriesi ones by:

function new_link(){
$kriesi_at_backlink = "<a href='https://your-new-link'>Your Text here</a>";
return $kriesi_at_backlink;
}
add_filter("kriesi_backlink","new_link");

this is the fastest way – but the results list in the flyout div is not the nice styled one as if you got it in main nav menu: Link

this one here : Link provides the styled result window.

if you got troubles even with method 1 – there must be something wrong with your setup or input into the child-theme functions.php.
Because you see that it is working on my Enfold 4.5.1 and WordPress 5.0.1 installtion. Link
I tested the shortcode method too on that installation – the only thing that was bad is the mentioned styling of the ajax results list.
The reason seems to be that on an enfold menu the search item is styled – out of enfold menu it is not.

and again btw: – the newly introduced filter : avia-ampersand can be misused to have some other content substitutions.
F.e. to replace all hyphens to non-breaking hyphens etc. pp.

add_filter('avia_ampersand','non_breaking_hyphens');
function non_breaking_hyphens($content) {
    $content = str_replace("-","‑",$content); 
    return $content;
}

sorry Boardsoft directly changes the code even in code block:

But a link to the new site will be helpfull.
First of all if your example page shows the aim of what you like to obtain – you have to change to the boxed layout first.
After that place a background-image on general layout – body background (it is in real a html background)
then we can start giving advice how to get your style.

well you can try this
Either you put the phone link in the top menu and don’t use the Phone-Number option. Then you take the above code, because it places the search function in front of the complete menu.

Or – also don’t use the Phonenumber option, add both things via Functions.php with the following code:

add_filter( 'avf_execute_avia_meta_header', '__return_true', 10, 1);
add_filter( 'avia_meta_header', 'avia_append_search_nav_mod');
function avia_append_search_nav_mod(){
          global $avia_config;
          ob_start();
          get_search_form();
          $form =  htmlspecialchars(ob_get_clean()) ;

          $items .= '<li id="menu-item-search" class="noMobile menu-item menu-item-search-dropdown menu-item-avia-special">
                        <a href="?s=" data-avia-search-tooltip="'.$form.'" '.av_icon_string('search').'>
                          <span class="avia_hidden_link_text">'.__('Search','avia_framework').'</span>
                        </a>
                    </li>
					<li class="phone-info">
					   <a href="tel:+49123456">+49123456</a>
					</li>';

    echo $items;
}

function custom_shift(){
?>
<script>
(function($){
	$('#header_meta .phone-info').prependTo('#avia2-menu');
	$('#header_meta #menu-item-search').prependTo('#avia2-menu');
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'custom_shift');

see result here: https://webers-testseite.de/ostler/

outside the top-menu the ajax menu doesn’t work the way it should – guess there are too many css rules missing to style the results dropdown.

The results list is a bit uglier than on the normal field-
i look for a different input – just a moment

but be carefull if the overflow is not set sometimes on transparencies the z-index 1 will not be clickable in your example