Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • January 7, 2022 at 2:29 am #1334599
    blaircomm1

    With the last update in Enfold, 4.8.8.1, all the code for social icons in the burger menu no longer works. I found these new items which make it show, but it is non functional and partially hidden: https://kriesi.at/support/topic/adding-social-icons-to-enfold-burger-menu/

    I added both the new php and the css.

    I cannot get my old CSS to work no matter what I do. The icons sort of show up, but are cut off and I cannot style them with CSS — plus the Linkedin icon does not show.

    Can you help me get this working again?

    Here is what worked before, both the php and the css:

    ORIGINAL FUNCTIONS.PHP _______________________________________________

    function custom_burger_social_bookmarks_script() { ?>
    <script>
    (function($){
    $(‘#avia-menu’).one(‘click’, function(){
    jQuery(‘ul.social_bookmarks’).clone().wrapInner(‘<div class=”burger_social_bookmarks”/>’).children(0).unwrap().appendTo(‘#av-burger-menu-ul’);
    });
    })(jQuery);
    </script>
    <?php
    }
    add_action(‘wp_footer’, ‘custom_burger_social_bookmarks_script’);

    ORIGINAL CSS ___________________________________________________________

    /*—-BURGER MENU—-*/

    /* Responsive flyout width */

    @media only screen and (max-width:767px) {
    .html_av-overlay-side .av-burger-overlay-scroll {
    width: 82% !important;
    }
    }

    /* Social bookmarks */

    #av-burger-menu-ul > .burger_social_bookmarks li a {

    }

    /* Menu overlay */

    #top #header .av-burger-overlay-bg {
    background: #ffffff;
    }
    #top #header .av-burger-overlay-bg {
    opacity: .2;
    }

    /* END Menu overlay */

    /* Menu items background color */

    .html_av-overlay-side #top .av-burger-overlay-scroll {
    background: #f838fa;
    }

    /* END Menu items background color */

    /* Menu items background font size */

    #top #wrap_all #av-burger-menu-ul li {
    font-size: 30px;
    }

    /*END Menu items background font size */

    /* Burger Menu size */

    .av-hamburger-inner, .av-hamburger-inner::before, .av-hamburger-inner::after {
    width: 40px !important;
    height: 4px !important;
    }

    /* END Burger Menu size */

    /* Burger menu links */

    #top #wrap_all #header .av-burger-overlay #av-burger-menu-ul li a {
    color:#ffffff;
    }

    /* Overlay menu links */

    #top #wrap_all #header .av-burger-overlay #av-burger-menu-ul li a:hover {
    color:#444444;
    }

    /* Active menu links */

    #top #wrap_all #header .av-burger-overlay #av-burger-menu-ul li.current-menu-item a {
    color:#444444;;
    }

    /* Burger menu icon color on transparent header */

    #header.av_header_transparency .av-burger-menu-main a .av-hamburger-inner,
    #header.av_header_transparency .av-burger-menu-main a .av-hamburger-inner:before,
    #header.av_header_transparency .av-burger-menu-main a .av-hamburger-inner:after {
    background-color: #444444;
    }

    /* END Burger menu icon color on transparent header */

    /*—-END BURGER MENU—-*/

    January 7, 2022 at 2:54 am #1334601
    blaircomm1

    I just figured it out.

    For the new version of Enfold, 4.8.8.1, you have to enable the social icons in the “Header” section of the main header area as suggested. Then add the suggested CSS below:

    .main_menu > .social_bookmarks {
    visibility: hidden;
    }

    However, the new PHP as on this support page does not work for me: https://kriesi.at/support/topic/adding-social-icons-to-enfold-burger-menu/

    This PHP does work perfectly — I am guessing because it appends the icons onto the burger menu instead of adding them as extra elements within the burger menu area:

    function custom_burger_social_bookmarks_script() { ?>
    <script>
    (function($){
    $(‘#avia-menu’).one(‘click’, function(){
    jQuery(‘ul.social_bookmarks’).clone().wrapInner(‘<div class=”burger_social_bookmarks”/>’).children(0).unwrap().appendTo(‘#av-burger-menu-ul’);
    });
    })(jQuery);
    </script>
    <?php
    }
    add_action(‘wp_footer’, ‘custom_burger_social_bookmarks_script’);

    January 7, 2022 at 5:45 am #1334642
    Ismael

    Hi,

    Thank you for the inquiry.

    Did you try the updated version of the script?

    // move social icons inside icon or mobile menu
function ava_custom_script_mod_social()
{
?>
	<script>
		(function($) {
			$(document).ready(function() {
				var burger_wrap = $('.av-burger-menu-main a');
				var social = $('.social_bookmarks');
				
				$(burger_wrap).on('avia_burger_list_created', function() {
					setTimeout(() => {
						social.appendTo('#av-burger-menu-ul').addClass("mobile_social_bookmarks");
					}, 150);	
				});
			});
		})(jQuery);
	</script>
<?php
}
add_action('wp_footer', 'ava_custom_script_mod_social', 10000);

    You can see this same script in this thread.

    // https://kriesi.at/support/topic/adding-social-icons-to-enfold-burger-menu/#post-1309661

    Best regards,
    Ismael

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.