now i’m working on that – so it might be not working for a while . It seems to be better if i change the dots to be before the avia-menu-text when they are at the left side.

Edit: so – if you only want some dots without text ( only on hovering) you can change yourself to your needed css.
The most important thing here is to have the active state of the menu list points.

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

https://webers-testseite.de/pureinstall/dot-navigation-with-colored-sections/

you can manage that with Enfold Tools.

• create a page where you have color-sections – set to 100% height.
• each of the color-sections got a unique ID.
• on top place a fullwidth submenu ( you can even use here an existing one ! But do not fix it here )
• the targets are the unique ID’s of the color-sections.

the rest is a bit of jQuery ( if you like to have an active state on those items)
and quick css.

All Instructions are on that page – with all code to be placed.
I placed the class of the active state to the li element and named it : inview
PS: you do not need to have this on the left side. Thats just a bit css more. I think it will not disturb the scroll bars here on the left

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

you had to find a solution for small screens on that – maybe you put the whole code only for a min width:

@media only screen and (min-width: 768px) {
  …
}

if the titles are a bit too long – maybe a different styling could be better.

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

.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
}

you are using the alb element : video to place the video?
If so did you see under Advanced Tab of the Video ALB the option: “Lazy Load videos”
Choose the option: “show in lightbox …”

on my ipad the video starts then in a lightbox – at the first moment as described a bit small of the lightbox dimension but after few ms it is then big.

look at: https://webers-testseite.de/selfhosted-video-in-lightbox/

one thing i recognized is that the loop does not work here.

that is a very nice solution!
– but with it it is not possible to have dynamic content like the “get_the_title()” or something like this in it ?
btw ( for me it works nice on every page without the if clause )

In your Screenshot first post – you like to only have the bloginfo name and description for that? I thought you like to have the post title on it.

in this case we can use on that page a shortcode to insert dynamic content like the page title.
this would generate a page title shortcode which we can use

function post_title_shortcode(){
    return get_the_title();
}
add_shortcode('post_title','post_title_shortcode');

you then can use [post_title] to have the page-title in your “recurring page content”

There must be something deeper in the trouble then. Because you should be able to disable a caching plugin without the page being unreachable.

please only copy paste the above – no css selector specification there.
because you do not see the things in detail what is active and what is focused.
After that – if it has an effect we can go and look for a more specific selector

just for info: we do not need the shortcode

and because on the most cases it makes no sence on showing the featured image on a post or portfolio created with advanced layout builder – we can use the meta box setting of showing or not showing the featured image.

add_filter('avf_template_builder_content', 'avf_template_builder_content_postimage_mod', 10, 1);
function avf_template_builder_content_postimage_mod($content = "")
{
  if(
  	is_singular('post') && ( '1' != get_post_meta( get_the_ID(), '_avia_hide_featured_image', true ) ) 
  	||  is_singular('portfolio') &&  ( '1' != get_post_meta( get_the_ID(), '_avia_hide_featured_image', true ) ) 
    ) 
  {
    $featuredImage = get_the_post_thumbnail( $the_id, 'entry_with_sidebar' );
    $content = $featuredImage . $content ;
  }
  return $content;
}

ok – you know how to have a custom alb element on your child-theme?
If not – please tell:

open postslider.php ( in enfold / config-templatebuilder / avia-shortcodes / postslider )
open it and look for : $post_class on line 419 : $post_class = "post-entry post-entry-{$the_id} …
just insert under it:
if ( is_sticky( $entry->ID ) ) { $post_class .= 'sticky'; }

so that there is now:

$post_class = "post-entry post-entry-{$the_id} slide-entry-overview slide-loop-{$post_loop_count} slide-parity-{$parity} {$last}";
if ( is_sticky( $entry->ID ) ) { $post_class .= 'sticky'; }

upload that postslider.php to your child-theme shortcodes folder ( on default there is no such folder – then create one)

to load those edited alb elements instead of the parent one do this to your child-theme functions.php:

function avia_include_shortcode_template($paths){
  $template_url = get_stylesheet_directory();
      array_unshift($paths, $template_url.'/shortcodes/');
  return $paths;
}
add_filter('avia_load_shortcodes', 'avia_include_shortcode_template', 15, 1);

now all sticky post got this class : sticky on postsliders

can you check if the code above works for you.
open the parent theme functions.php and insert that code just in that place where the comment is:

/*
 *  register custom functions that are not related to the framework but necessary for the theme to run
 */

nearby lines 772ff

just before:

require_once( 'functions-enfold.php');

A child theme is not so hard to install. There are good instructions for this in the Enfold online documentation.

i changed on my test-page a little the css
so on the ipad from landscape to portrait mode it now has an effect. Just to prove if it works when the device is tilted.

so now my solution with split point at 768px – but you will see that you can easily customize it
( you had to remove the solutions from above ! )
see here: https://webers-testseite.de/pureinstall/

this comes to child-theme functions.php:

function ava_custom_script_mod_social(){
?>
<script>
(function($){
  $('#header').one('click', '.av-main-nav-wrap', function() {
    var isMobile  = $('.av-burger-menu-main').css('display'),
    social    = $('#header .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);
    }  
  });
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'ava_custom_script_mod_social');

this will end in a DOM like this: one li as a normal burger li with submenu social list:

Guess i think caused by missing css for burger social links these are in addition on quick css:

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

/********* adjust to your needs ***************/
@media only screen and (max-width: 767px) {
  .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: 768px) {
  .only-burger.menu-item-social {
    display: none
  }
}
/************ End of media query  for that *********************/

#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; }

because there are no IDs cloned – there are no duplicate IDs in the DOM at a time.
By the way, this is not an orthographic error with :
one(‘click’ …
i was not sure if it would be added with every click. The jQuery .one() is then there to execute it exactly once.

Well on my little code i had to find a way that the burger icon has a state that it has been clicked allready.
See here : https://webers-testseite.de/
but it only works if the burger has been opend one time. Don’t know why – maybe a mod knows a way.

This is a load resize basis with debounce function so you can change screen width and you will see that it works ( as long the burger has been opend once.

___________

but let’s not get ahead of ourselves. Why can’t both of them be in the DOM, and by means of media querries only be faded in and out.

the difficulty for that is that a reaction on resize ( for example turn an ipad from landscape to portrait mode) is a performance-intensive way to observe. This is the reason why these functions almost always interact with a debouncing function.

Do you need the socket social media icons? If not – maybe you can try not to clone the icons but to detach them (that lines above)

$(socialString).each(function() {
         $(this).detach().appendTo('#av-burger-menu-ul');
 });

edit ah now i see what is your aim : it is a page like this : https://kriesi.at/themes/enfold-creative-studio/ and you only want to shift the social icons to hamburger if screens are to narrow – that an overlap with logo will happen.

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