what do you mean by right side of the page
you mean something like this (here on the left) https://fusesocialfloating.000webhostapp.com/fuse-social-floating/

there are alot of plugins doing this

this is the page where enfold options are shown. Have you more input of the js errors ?
have you managed some entries in your functions.php of child-theme ?

Actually everything is already said !

A) erase the codes and custom-classes set by the other method

1) download the script from here: Download
2) Upload that script to your child-theme / js – Folder
3) Embed that javascript file to enfold – put in functions.php of your Child-Theme:

function include_sticky_js_file() {
wp_enqueue_script( 'stickyelement', get_stylesheet_directory_uri().'/js/jquery.stickyelement.min.js', array('jquery', 'avia-default'), 2, true );
}
add_action( 'wp_enqueue_scripts', 'include_sticky_js_file', 100 );

4) Give the custom-Class to your element you want to fix : sticky_element
5). This comes to your functions.php of your Child-Theme:

add_action('wp_footer', 'include_sticky_values');
function include_sticky_values(){
?>
<script type="text/javascript">
(function($) {
	$(window).on('load resize', function () {
          if ($(window).width() > 768) {
            /***  here comes the code to sticky element***/
                $('.sticky_element').sticky('.entry-content-wrapper', {
                    useTransition: false,
                    animate: false,
                    offset: 85
                });
            /***  here ends the code to sticky element***/
           }
        }).trigger('resize');
})(jQuery);
</script>
<?php
}

( in nearly all cases the direct parent element will be : entry-content-wrapper )

6) if you have to adjust the offset because on different pages it might be other settings this part you can add inbetween the commented lines with other custom class of sticky element ( perhaps : sticky_element2, etc.)

                $('.sticky_element2').sticky('.entry-content-wrapper', {
                    useTransition: false,
                    animate: false,
                    offset: 50
                });

7) add this to your quick css to have not the calculated top distance on responsive case
you might adjust this – depending on your settings:
( sticky-scroll is the class added by that script to your sticky elements)

@media only screen and (max-width: 767px){
.sticky-scroll {top: 0!important}
}

8) Think of – that there is no other element in the same color-section under the sticky element – you have to open a new color-section if there are other content under it !

do you have a live link to it – and or a screenshot how it should look like

something like this ? https://webers-testseite.de/elegant/

you could have it vice-versa

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

schöne Grüße nach Berlin !

wenn du das hier setzt dann geht beim Verkleinern des Screens das Logo mit in der Breite:
dadurch floatet das letzte Element nicht mehr um – kurz vorm umschalten des responsive designs auf hamburger menu

#header_main_alternate .main_menu ul:first-child {
    display: inline-flex !important;
}

ok – i see you got it:

if you like to increase header-height now:

#header_main_alternate, #avia-menu  {
    height: 80px !important;
}

#avia-menu li a {
    line-height: 80px !important;
}

i do not know what id your new menu-item will get.
So these ZZZ are placeholders.

click to enlarge

by the way – you have to be a bit earlier to mobile menu – your last menu point flows to next line on some screen width

where to get it: i got mine from envato

duplicate this menu point and place it on top of your menu.
now you have two images in the menu:
set the main_menu logo to display none. ( ZZZ will be the list-item id. – do it and than i will help you to determine)
and on burger menu the same with the logo in the middle position

is it a WPML translation ?

If so – this is not a bug – it is a feature of WPML
This gives you the oportunity to set up a totaly different layout if you wanted.

the point is that even the enfold options page on admin has a german and an english settings page.

the way to synchronise it : The wanted page layout – choose (on your site it seems to be the english one.
Go to Enfold – Import/Export. (on top you see there is an english flag ). – Export Theme-Settings File

Change now to german ( you see even on Enfold Admin above a german flag)
Same thing but import now the “english” Theme Settings file.
Don’t know if the quick css is imported too – but i think – yes.

________________________

Edit: . ah i see it is a sitepress plugin. But. it might be similar to the description above.

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

A little info about sticky : there is a discussion on css3 experimental position:sticky (-webkit-sticky) and it seems that this will be included in the future browsers. ( it is something in between fixed and relative positioning – as in my solution above) and it should only be necessary to set this css rule and the top bzw bottom value )
see here : https://developer.mozilla.org/en-US/docs/Web/CSS/position#Sticky_positioning

i suppose that there are too many dependencies to other js files needed jquery. So every one of these has to be under the jquery loading.

This is normal registering of wordpress and not specific to enfold.
I don’t know how WP-Rocket tries to do so.
if i would like to do so i will first deregister it and than register it back again f.e.

i have sometimes this on my functions.php –
that loads the jquery via cdn from google servers – if it exists (or a internet connection is present)
if not it will load the normal jquery from folder – but i do not have success on loading it in the footer.

if( !is_admin()){ 
    $url = 'https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js'; 
    $test_url = @fopen($url,'r'); 
    if($test_url !== false) { 
        function load_external_jQuery() {
            wp_deregister_script('jquery'); 
            wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js'); 
            wp_enqueue_script('jquery'); 
        }
        add_action('wp_enqueue_scripts', 'load_external_jQuery'); 
    } else {
        function load_local_jQuery() {
            wp_deregister_script('jquery'); 
            wp_register_script('jquery', '/wp-includes/js/jquery/jquery.js', __FILE__, false, '1.12.4', true); 
            wp_enqueue_script('jquery'); 
        }
    add_action('wp_enqueue_scripts', 'load_local_jQuery'); 
    }
}

i tested it with google loading – and it is no performance profit on it.

but on enfold the avia-compat.js is loaded in the header – maybe this is the reason for inconsitencies if jquery is in the footer (after avia-compat.js)

it would be better if you get help from a mod here – give them an admin account.
Because you have first the trouble with parent name and child mismatch.
This was the first thing to do – because all other work will ground on a working child-theme.
Doing code to parent functions.php is to risky – and you will loose the things on next update.

If this is done – i will help you furthermore. Because you have done allready alot of work on your theme it is best to have a backup of it.

___________

On your page ( by the way it is page-id-4652 )
you have those sticky column in : (#after_section_1)
You gave to the 1/3 column the custom class: fixed_element (on code it will be .fixed_element )
by the way you have to get rid of other solutions on that – the other codes will be causing problems on that)

so the code will be :

add_action('wp_footer', 'include_sticky_values');
function include_sticky_values(){
?>
<script type="text/javascript">
(function($) {
        $(window).on('load resize', function(){
          if ($(window).width() > 768) {
            /***  here comes the code to sticky element***/
                $('.fixed_element').sticky('#after_section_1', {
                    useTransition: false,
                    animate: false,
                    offset: 85
                });
            /***  here ended the code to sticky element***/
           }
        });
})(jQuery);
</script>
<?php
}

we have to play later with the offset value if it will be ok for your site

to that script : it works with sticky element and surrounding parent. The fixed positioning is gone when sticky element reaches the bottom of the parent container. !
So you must do following containeres in a different f.e. color-section !!!
see now the test page i inserted in the same container a 1/1 under it – and this leads to something you don’t want to have.

some words on sticky element – :

go and have a look to different devices if the effect works on all – espacially mobile browsers. Very often the page is than unusable.
For our script above we had to find a way to have normal behavior for responsive case ! This is possible – but performance will go down
Another intime process must prove if window width is less than f.e 768px
i think this should only be a gimmick to use on one page – the risk of losing users because of a low performance of the site is too high.