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, 7 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, 7 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

First : see comment on caches ! and performance settings of Enfold.

Then it might be on your quick css some “orthographic” mistakes – that means more or less syntaxical errors
a missing Bracket or semicolon etc. pp everything after that error will then be ignored.

first of all to my co participants: use code block element to represent code snippets here on board !
Only on that you can copy / paste things to your code.

to have no ajax search suggestions on the input field on top you can do this to your child-theme functions.php
i don’t know if this will work too on the new ALB – but try it

Edit : on that ALB Element there is on “Search Settings” a possibility to get rid of the ajax looklike !

add_action('avf_frontend_search_form_param', 'av_disable_ajax_search',9);
function av_disable_ajax_search($params)
{
	$params['ajax_disable'] = true;
	return $params;
}

And by the way – i got no autocomplete on my installation – it will on case of ajax show directly all Results under the container – but the inputfield will not autocomlete f.e. imp to impressum etc.