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.

Testing page is my page where i tested it for you if it will work: https://webers-testseite.de/sticky-column/

nearly every modern browser got his own “developer tools”.
on a lot of browsers hold the mouse over the element you want to inspect and press context menu button of your mouse (left button) on my magic mouse it is the left part of the active sensor field.
on that context menu there is something like inspect the element or only inspect.
on first use a window opens with the source code and some extra infos about css etc. – you can have that part of the window as an extra window separated from your frontend window. Now have a look what happens when you go with your mouse over the elements.

https://streamable.com/s/5lhs9/xykcyp&iframe=true

there you can get what you want – all the classes and ids.
The html source code is on the left and well formated with cascaded styling – parents are allways more left – and on click to the little arrow the container opens and shows you the inner content.

The realy clou on that is that you can edit on the right side the css virtually. Nearly allmost Changings are shown on your front end immediately.
click on image to enlarge – you will see that i virtually changed the color of that inputfield i’m writing on now:

On Enfold the color-sections got ids with the pre-name av_section_ and a count (starting at 1)

well the scripts you can download from the github link above – take the minimized one: Link

create a child-theme and in the child theme folder an js folder
upload that minimized script to this js folder.

on your functions.php of your child theme insert:

function include_sticky_js_file() {
if( is_page(30238) ) {
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 );

you see that i only embed the code where i need it. The other pages stay untouched because of performance reasons.
Allthough that little script only has 4kb

Now you need the script for the implementation on the specific page:
the script has two (take some classes – this is easy to set on enfold) containers to observe
the container which is sticky – and the parent element. So i gave to the color-section (or whatever it is a class that i can select it easier and the same with the container which should remain sticky.

See code for my test installation:

add_action( 'wp_footer', 'custom_sticky_script' );
function custom_sticky_script() {
if( is_page(30238) ) {
  ?>
  <script type="text/javascript">
            jQuery(document).ready(function(){     
                // With options
                jQuery('.sticky_element').sticky('#av_section_1 .entry-content-wrapper', {
                    useTransition: false,
                    animate: false,
		    offset: 110
                });
                jQuery('.sticky_element2').sticky('#av_section_3 .entry-content-wrapper', {
                    useTransition: false,
                    animate: false,
		    offset: 0
                });
            });
  </script>
  <?php
}
}

you see on my testpage two containers which stay fixed so two codes for it

jQuery('.sticky_element').sticky('sticky_parent_container', { …

so on my testpage the column gets the class sticky_element (and sticky_element2)
and the direct parent container is adressed by me via #av_section_1 .entry-content-wrapper

thats all – you have to play with the offset value

well first – you don’t want to have two search icons ? – yes – so remove the one by dashboard – enfold(-child) – hauptmenu – Append search icon to main menu
uncheck the box.
Try to get rid of your code to center the logo.
if you haven’t anything against it post a live link to your page.

Get familiar with child-themes – this is the only way to do proper hooks and filters.
You don’t loose changes by updating the parent theme

See here with download. No Magic behind it:
Theme-Documentation: https://kriesi.at/documentation/enfold/
Using Child-Theme: https://kriesi.at/documentation/enfold/using-a-child-theme/
Download a predefined child-theme: http://bit.ly/enfold-child

ah – you have forgotton one closing curly bracket after return logo. !

on if clauses you can have nice things like:

if ( is_singular( 'event' ) || is_search( ) || is_category( ) || is_page( ) && !is_page(1307) || is_singular( 'portfolio' ) ) {

the || marks the or and the !. means not

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

var sticky = $('.fixed_element');

so i guess the $sticky is wrong in the rest of the function – or you setup
var $sticky = $('.fixed_element');

i do use this code – don’t know if both will work:

add_filter( 'jpeg_quality', create_function( '', 'return 100;' ) );

but this will affect only the upload – so if you want to handle already uploaded images you must use after the code a plugin like regenerate thumbnails – to recalculate the images.

look here: https://kriesi.at/support/topic/logo-isnt-showing-in-mobile-menu/#post-868215
now it is a bit easier because the new 4.2 got now every burger-menu list point a unique id so on #avia-menu you can set the menu-item-id to display none. on burger-menu – do nothing.

the method ist to put in menu two home links – the one shows the text the first one is replaced with the img src .
This first one you set on #avia-menu to display none.

that means on non responsive case you have the text menu?
no difference between the codes – only if you have a top-navigation

the original image is on : https://kriesi.at/themes/enfold-construction/files/2015/10/house-wire-model-fade-white.png

kriesi has now https too and therefore the links are new

have a look to this –
i do not know if you have social icons too besides the burger menu icon
and how did you center the logo (its in my code implemented)
you have to style it for the different responsive cases.

https://webers-testseite.de/elegant/

you must use a child-theme for this solution:

this comes to functions.php of yout child-theme:

add_filter( 'ava_main_header', 'avia_append_search_header_mod');
function avia_append_search_header_mod()
{
  global $avia_config;
  ob_start();
  get_search_form();
  $form =  htmlspecialchars(ob_get_clean()) ;
  $items .= '<div id="menu-item-search">
	      		<a href="?s=" data-avia-search-tooltip="'.$form.'" '.av_icon_string('search').'>
	      		<span class="avia_hidden_link_text">'.__('Search','avia_framework').'</span>
	      		</a>
         	</div>';
    echo $items;
}

this comes to quick css:

div .logo, .logo img, .logo .subtext img {
    left: 50%;
    transform: translateX(-50%);
}
#top #header_main #menu-item-search {
    position: absolute;
    left: 25px;
    top: 25px;
}
#top #header_main #menu-item-search a {
    color: #333;
    font-size: 24px;
}
.responsive #top .logo {
    position: relative;
}

well it is not as easy as to place it in quick css. on shortcodes.css replacement it has an effect.
perhaps you edit the keyframe too – it looks better – the distance of transformation is to short to see a faster animation.

f.e.

@-webkit-keyframes avia-ltr {
  0%   { -webkit-transform:translate(-50%,0); opacity: 0;  }
  100% { -webkit-transform:translate(0,0); opacity: 1; }
}
@keyframes avia-ltr {
  0%   { transform:translate(-50%,0); opacity: 0;  }
  100% { transform:translate(0,0); opacity: 1; }
}

see https://webers-testseite.de/elegant/animated-images/

PS: try to set the keyframes on quick css – i did not test it – if it works

i believe it is on wpml easy to obtain – under the wpml options there are on Languages just under Language URL Format the:

Language switcher options
All language switchers in your site are affected by the settings in this section.

there is “How to handle languages without translation” try to choose skip language and see what happens

sometimes the video starts automatically – sometimes it is only a screenshot seen. and the playbutton on it has no function
Dont know.