The waypoints script is a mighty tool – and as mentioned above it is integrated in Enfold with its main parts.
In Combination with animate.css we can create scrollbased animations like Enfold offers when elements comes into viewport.

I change for now the animation on my test page to bounceOutRight
The code in functions.php only get then instead of vanished : bounceOutRight. Thats all – but these animate.css are not part of Enfold.
The opacity change from 0 to 1 and viceversa is ok too.

hast du ein Child-Theme installiert? Macht die Sache einfacher und “update resistent”

Also : aktiviere bitte im Footer die Social Media Icons ( Enfold – Footer – Social Icons)
Diese werden jetzt als Grundlage dafür genommen – diese in das Hauptmenu einzusetzen und in das Hamburger Menu auch.
Siehe meine Testseite im responsiven Fall.

jetzt der Code für die child-theme functions.php

/************* verschieben der #socket social buttons in das Haupt-Menu und in das mobile (hamburger) menu ************/
function ava_main_menu_social(){
?>
<script>
(function($){
	$('#socket .social_bookmarks').css({ 'display': 'none' });

	$('#header').one('click', '.av-main-nav-wrap', function() {
    var isMobile  = $('.av-burger-menu-main').css('display'),
    social    = $('#socket .social_bookmarks').clone(true).addClass('sub-menu'),
    mobileMenu  = $('.av-burger-overlay');
    mobileMenu.find('#av-burger-menu-ul').append('<li class="only-burger menu-item-social av-active-burger-items"><a itemprop="url" alt="Social Bookmarks" style="" href="#"><span class="avia-bullet"></span><span class="avia-menu-text">Social Bookmarks</span><span class="avia-menu-fx"><span class="avia-arrow-wrap"><span class="avia-arrow"></span></span></span></a></li>');
  
    if( social.length ){
      mobileMenu.find('.only-burger.menu-item-social').append(social);
    }
	});
				
  var htmlString   = $('#socket .social_bookmarks').clone().find('li a'),
  socialString = [];

  htmlString.each(function() {
    var socialClass = $(this).parent('li').attr('class'),
        socialItems = $(this).wrap('<li class="'+ socialClass + ' menu-item menu-item-avia-special menu-social"></li>').parent().unwrap();
    socialString.push(socialItems);
  });
	
 	var socials = socialString.reverse();
  $(socials).each(function() {
        $(this).appendTo('#avia-menu');
  });
	$('#avia-menu .menu-social').css('float', 'right');
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'ava_main_menu_social');

( wenn ich mal den Code erklären soll sag bescheid * )

damit das im responsiven Fall auch hover states hat im Hamburger Menu müssen da einige css Sachen erneut gesetzt werden.

das also in das quick css

.responsive #top #avia-menu-0 .menu-social { display: none }

#av-burger-menu-ul .menu-item-social > a {
  pointer-events: none;
}

@media only screen and (max-width: 768px) {
  .main_menu .social_bookmarks {
    display: none !important;
  }
  .avia-menu.av_menu_icon_beside {
      padding-right: 0;
      margin-right: 0;
      border-right: none !important;
  }
}

@media only screen and (min-width: 769px) {
.main_menu .social_bookmarks:not(.sub-menu) {
  overflow: visible !important;
  display: flex !important;
  flex-flow: row wrap;
  justify-content: space-between;
  align-content: center;
}

.main_menu .social_bookmarks:not(.sub-menu) li {
  flex: 0 1 30%;
  line-height: unset !important;
  margin: 2px 0;
}

  .only-burger.menu-item-social {
    display: none
  }
}

#av-burger-menu-ul .menu-item-social a .avia-menu-text {
  font-style: italic;
}

#av-burger-menu-ul .only-burger.menu-item-social {
    border-top: 1px dashed gray;
    border-bottom: none !important;
}

.html_av-overlay-side-classic #top .av-burger-overlay li.menu-item-social a {
border : none !important
}

.responsive #top #av-burger-menu-ul .social_bookmarks.sub-menu {
  margin-left: 30px;
  overflow: visible;
  float: left !important;
  display: block !important;
  height: auto
}

#av-burger-menu-ul .social_bookmarks.sub-menu li {
    display: block;
    margin: 3px 10px;
    float: left;
}

#av-burger-menu-ul .social_bookmarks.sub-menu li a {
  padding: 10px !important;
  display: table-cell !important;
  float: none !important;
border-radius: 0 !important
}

#top #wrap_all #av-burger-menu-ul .av-social-link-facebook a { padding: 10px 13px !important;}
#top #wrap_all #av-burger-menu-ul .av-social-link-rss:hover a{color:#fff; background-color:#ffa133!important; }
#top #wrap_all #av-burger-menu-ul .av-social-link-facebook:hover a{color:#fff; background-color:#37589b!important; }
#top #wrap_all #av-burger-menu-ul .av-social-link-twitter:hover a{color:#fff; background-color:#46d4fe!important; }
#top #wrap_all #av-burger-menu-ul .av-social-link-whatsapp:hover a{color:#fff; background-color:#00e676!important; }
#top #wrap_all #av-burger-menu-ul .av-social-link-mail:hover a{color:#fff; background-color:#9fae37!important; }
#top #wrap_all #av-burger-menu-ul .av-social-link-dribbble:hover a{color:#fff; background-color:#e44885!important; }
#top #wrap_all #av-burger-menu-ul .av-social-link-linkedin:hover a{color:#fff; background-color:#419cca!important; }
#top #wrap_all #av-burger-menu-ul .av-social-link-search:hover a{color:#fff; background-color:#222222!important; }
#top #wrap_all #av-burger-menu-ul .av-social-link-gplus:hover a{color:#fff; background-color:#de5a49!important; }
#top #wrap_all #av-burger-menu-ul .av-social-link-behance:hover a{color:#fff; background-color:#008cfa!important; }
#top #wrap_all #av-burger-menu-ul .av-social-link-flickr:hover a{color:#fff; background-color:#ff0086!important; }
#top #wrap_all #av-burger-menu-ul .av-social-link-forrst:hover a{color:#fff; background-color:#234317!important; }
#top #wrap_all #av-burger-menu-ul .av-social-link-myspace:hover a{color:#fff; background-color:#000000!important; }
#top #wrap_all #av-burger-menu-ul .av-social-link-tumblr:hover a{color:#fff; background-color:#345574!important; }
#top #wrap_all #av-burger-menu-ul .av-social-link-vimeo:hover a{color:#fff; background-color:#31baff!important; }
#top #wrap_all #av-burger-menu-ul .av-social-link-youtube:hover a{color:#fff; background-color:#a72b1d!important; }
#top #wrap_all #av-burger-menu-ul .av-social-link-pinterest:hover a{color:#fff; background-color:#cb2027!important; }
#top #wrap_all #av-burger-menu-ul .av-social-link-skype:hover a{color:#fff; background-color:#12a5f4!important; }
#top #wrap_all #av-burger-menu-ul .av-social-link-instagram:hover a{color:#fff; background-color:#a67658!important; }
#top #wrap_all #av-burger-menu-ul .av-social-link-five_100_px:hover a{color:#fff; background-color:#222222!important; }
#top #wrap_all #av-burger-menu-ul .av-social-link-soundcloud:hover a{color:#fff; background-color:#F76700!important; }
#top #wrap_all #av-burger-menu-ul .av-social-link-xing:hover a{color:#fff; background-color:#006567!important; }
#top #wrap_all #av-burger-menu-ul .av-social-link-vk:hover a{color:#fff; background-color:#597BA5!important; }
#top #wrap_all #av-burger-menu-ul .av-social-link-reddit:hover a{color:#fff; background-color:#FF4500!important; }
#top #wrap_all #av-burger-menu-ul .av-social-link-yelp:hover a{color:#fff; background-color:#d32323!important; }
#top #wrap_all #av-burger-menu-ul .av-social-link-kununu:hover a{color:#fff; background-color:#2fb313!important; }

this would do the job for you – for ipad etc it is better to have z-index positiv values.

for quick css:

.fixed-heading {
    opacity: 1;
    transition: opacity 0.3s ease;
}

.fixed-heading.vanished {
    opacity: 0;
    transition: opacity 0.3s ease;
}

for child-theme functions.php

function scroll_up_down_change() {
if(is_page(1048)){
?>
<script>
(function($) {
var element_to_observe = $('#emergency');
var	fixedElement = $('#av_section_1 .avia_textblock div[style*="fixed"]').addClass('fixed-heading').css('z-index' , '5');

    element_to_observe.waypoint(function(direction) {
        if (direction == 'up') {
          fixedElement.addClass('vanished');
        }
        else {
          fixedElement.removeClass('vanished');
        }
        fixedElement.toggleClass('vanished');
    }, { offset: '80%' });
})(jQuery);
</script>
<?php
}
}
add_action('wp_footer', 'scroll_up_down_change', 30);

waypoint looks for the position of the observed element ( #emergency ) – when it is at 80% of the viewport it will add a class.

first: i am surprised that the negative z-index should work in all browsers!

Is this something you could live with? : https://webers-testseite.de/pureinstall/alb-testseite/

Look to the responsvie case on narrower screens.

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

This is one of those topics I particularly hate.
Someone ( in this case Mike ) is trying hard to find a solution and nobody knows what for; if it could be useful for you – or me.
Is it really so difficult to have a page on which one shows an example of what is meant.
Is it really always necessary to hold the page in question secret?

I checked the answers here, but could’t fid the right one.

Where do you check ( no link ) etc. pp.

on that page – have you inserted the p-tags again. – this code does not bring back removed p-tags.

put this to your child-theme functions.php:

remove_filter('the_content', 'wpautop' );
remove_filter('the_excerpt', 'wpautop' );

refresh merging and delete all cachings if used.

each button got his unique class as f.e. : landscape_sort_button etc. pp
so you can select them very specific to insert f.e. a top-border – but a hierarchical structure would be hard to get here
_________

by the way, I would recommend you not to use any merging or caching tools while you are working on the styling.
You don’t always see immediately if something is effective – besides that it’s hard to give the right hints even as an advisor.

#top div.container .av-masonry.sort-left .av-masonry-sort {
  width: 18%;
  float: left;
  overflow: visible;
  margin: 5px !important;
}

.av-masonry.sort-left .av-masonry-container {
  width: 80%;
  float: left;
  clear: none;
  margin-top: 50px;
}

#top .av-masonry.sort-left .av-sort-by-term {
  float: none !important;
  padding-top: 40px !important;
}

#top .av-masonry.sort-left .av-sort-by-term a {
    display: block;
    text-align: left;
    float: none !important;
    clear: both;
}

#top .av-masonry.sort-left .av-sort-by-term .text-sep {
    display: none;
}

#top .av-masonry.sort-left .av-current-sort-title {
	text-align: left;
	white-space: nowrap
}

on your page : https://stevenduncanart.com/fine-art-prints-shop/?v=6cc98ba2045f#
please try in quick css:
(if it is only for that masonry – better give a custom class to the masonry f.e.: sort-left )

#top div.container .av-masonry.sort-left .av-masonry-sort {
  width: 18%;
  float: left;
}
.av-masonry.sort-left .av-masonry-container {
  width: 80%;
  float: left;
  clear: none;
}

#top .av-masonry.sort-left .av-sort-by-term {
  float: none !important;
}

#top .av-masonry.sort-left .av-sort-by-term a {
    display: block;
    text-align: left;
    float: none !important;
    clear: both;
}

#top .av-masonry.sort-left .av-sort-by-term .text-sep {
    display: none;
}

Thanks last solution fits well and i think it is usefull to have.

First: You mean that Masonry for Posts/Portfolio etc. ?- because a masonry (image) gallery has no sortoptions to preselect in the alb element.

Due to the changing height of the Masonry container this is very inconvenient. A sorting element placed above keeps its position whether it is followed by 30 Masonry elements or only 4.

See Examplepage here: https://webers-testseite.de/portfolio/

Because these two containers are siblings you can change their position by ( via child-theme functions.php ) :
( adjust to your page ID )

function change_position() { 
if(is_page(2623)){
?>
<script>
(function($){
	$('.av-masonry-container').insertBefore($('.av-masonry-sort'));
})(jQuery);
</script>
<?php
}
}
add_action('wp_footer', 'change_position');

this f.e. in quick css

.page-id-2623 .av-masonry-sort {
    position: relative;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-block;
    margin-bottom: 60px !important;
}

for those testings it is allway nice to deactivate all caching plugins – because they do present not the actual site code.
I see you are using autoptimize. So there are saved cached states .
My advice is: as long as you are styling your site : deactivate all cachings – even the enfold merging will preserve older states of the given css ( js too )

see here a test page : https://webers-testseite.de/pureinstall/toggles/#offer
the global setting works on safari ( Version 13.1 (15609.1.20.111.8) OSX 10.15.4 (19E287) (Catalina) )

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

can you try first very globaly :
:focus, :active { outline: none !important }

Not for that matter – you are welcome