Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #1292901

    Hi everyone,

    I’ve been having a hard time trying to implement some functions.php code since the changes aren’t taking effect.
    After reading some threads on the topic I consulted with my hosting providers, but after they performed some server-related stuff the changes still didn’t reflect design-wise, so I was wondering whether you might know the reason why this file isn’t working properly?

    The changes I’m pursuing are social icons in slide-out menu and on footer widget (third column).
    I’ve done the source code checking and noticed that one change does appear but is absent in the front-end:

    CHANGE 1: social icons on slide-out menu.

    // add social icons inside the mobile menu
    function ava_custom_script_mod_social(){
    ?>
    <script>
    (function($){
    var int = ”;
    function a() {
    var isMobile = $(‘.av-burger-menu-main’).css(‘display’),
    htmlString = $(‘#header_main .social_bookmarks:first’).find(‘li a’),
    mobileMenu = $(‘.av-burger-overlay’),
    socialString = [];

    if(isMobile == ‘none’) return;
    if($(‘.burger-social’).length) clearInterval(int);

    htmlString.each(function() {
    var socialClass = $(this).parent(‘li’).attr(‘class’),
    socialItems = $(this).wrap(‘<li class=”‘+ socialClass + ‘ av-active-burger-items burger-social”></div>’).parent().unwrap();
    socialString.push(socialItems);
    });

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

    $(‘#header’).on(‘mousedown’, ‘.av-main-nav-wrap’, function() {
    int = setInterval(function() {
    a();
    }, 500);
    });

    })(jQuery);
    </script>
    <?php
    }
    add_action(‘wp_footer’, ‘ava_custom_script_mod_social’);

    This one does not show up:

    CHANGE 2: social icons on footer widget (third column). I’ve also added the concerning CSS code that comes with it.

    function social_bookmarks_register_widget() {
    register_widget( ‘add_social_bookmarks’ );
    }
    add_action( ‘widgets_init’, ‘social_bookmarks_register_widget’ );

    class add_social_bookmarks extends WP_Widget {
    public function __construct() {
    $widget_ops = array(
    ‘classname’ => ‘socialbookmarks-widget’,
    ‘description’ => __(‘A widget that displays the social bookmarks’, ‘avia_framework’)
    );
    parent::__construct( ‘add_social_bookmarks’, THEMENAME.’ Social Bookmarks’, $widget_ops );
    }

    public function widget( $args, $instance ) {
    $title = apply_filters( ‘widget_title’, $instance[‘title’] );
    echo $args[‘before_widget’];
    //if title is present
    if ( ! empty( $title ) )
    echo $args[‘before_title’] . $title . $args[‘after_title’];
    //output
    echo $before_widget;
    $social_args = array(‘outside’=>’ul’, ‘inside’=>’li’, ‘append’ => ”);
    echo avia_social_media_icons($social_args, false);
    echo $after_widget;
    }

    public function form( $instance ) {
    if ( isset( $instance[ ‘title’ ] ) )
    $title = $instance[ ‘title’ ];
    else
    $title = __( ‘Social Bookmarks’, ‘avia_framework’ );
    ?>
    <p>
    <label for=”<?php echo $this->get_field_id( ‘title’ ); ?>”><?php _e( ‘Title:’ ); ?></label>
    <input class=”widefat” id=”<?php echo $this->get_field_id( ‘title’ ); ?>” name=”<?php echo $this->get_field_name( ‘title’ ); ?>” type=”text” value=”<?php echo esc_attr( $title ); ?>” />
    </p>
    <?php
    }

    public function update( $new_instance, $old_instance ) {
    $instance = array();
    $instance[‘title’] = ( ! empty( $new_instance[‘title’] ) ) ? strip_tags( $new_instance[‘title’] ) : ”;
    return $instance;
    }
    }

    I’ve also tried this code that was suggested in a similar case, but didn’t affect anything:

    function custom_stuff(){
    ?>
    <div style=”display:none”>Find this</div>
    <?php
    }
    add_action(‘wp_footer’, ‘custom_stuff’);

    At this point, I’m questioning whether is a WP or theme-related issue?

    I would truly appreciate some help from you. Link to site has been provided in the private content area.

    Thanks in advance.

    Regards!

    H

    #1293189

    Hey Harold,

    Thank you for the inquiry.

    We modified that code a bit to make it compatible with the updated mobile menu. Please check the snippet in the following thread.

    // https://kriesi.at/support/topic/social-icon-in-mobile-menu/#post-1226347

    Best regards,
    Ismael

    #1293202

    Hi Ismael,

    Thank you for your help; however, I’ve implemented both codes (found on the thread) and cleared all caches, but nothing changed.

    Regards,

    H

    #1293208

    @ismael – nice short code – i will try that too – if it will work on my test installation


    @hacart
    – if you post code here on board – please use the code function on top of the input area:
    click code on top – enter your code ( paste in ) – click again ( now you see it is a closing code tag)
    it is much easier to verify the code if all signs are in a copy-ready form.

    Edit: if he has one social-bookmarks placed.
    and we had to find a solution if he wants footer socialbookmarks too. Then the selector: “.social-bookmarks” is there twice.
    And though i got on my testpage the hamburger icons twice.
    Btw: on my testpage these inserted lists are on display: none – but that might be a setting unique for my installation.
    But test it in your page – and look with developer tools if these icons are there but not displayed.

    #1293456

    Hi,

    Thank you for the update.

    @guenni007: Yes, that should work. Make sure that social icons are actually enabled.

    @hacart: It is probably not working because the social icons are not enabled, or they do not actually exist in the page. You have to enable the social icons in the Enfold > Header > Extra Elements panel, look for the Header Social Icons settings. If you want to hide the icons on desktop view or on larger screens, try to create a css media query.

    Best regards,
    Ismael

    #1297755

    Hey Ismael,

    You are right. That was certainly needed.

    Cheers,

    h

    #1298119

    Hey guys,

    I hadn’t realised there is a problem with “link positioning” in the mobile menu’s social icons since every time I click on a specific icon, the one next to it (on the right) opens up the page. How could we fix this pls?

    Regards,

    h

    #1298166

    Hi,

    It is due to the default padding of the li elements in the burger menu. To fix it, use this css code.

    #top #wrap_all #av-burger-menu-ul li.av-active-burger-items.burger-social a {
        padding: 0;
    }
    
    #top #wrap_all #header #av-burger-menu-ul > li.av-active-burger-items.social_icon_1 {
        margin-left: 50px;
    }

    Best regards,
    Ismael

    #1298349

    Hey Ismael,

    They got far into the left border as you will see. I then changed the 0 value for 10 and it seemed natural, but again the problem persisted.

    Regards,

    h

    #1298730

    Hi,

    Thank you for the udpate.

    You missed the second css declaration above. The css code should move or pull the social icons to the right.

    Best regards,
    Ismael

    #1298843

    I’ve just double-checked and both declarations are set correctly in the Custom CSS area. Could you specify what exact declaration you mean, pls?

    Regards.

    #1299284

    Hi,

    Did you remove the css code? The default padding of the mobile menu items or of the social icon entries are back. This is the css code that was missing.

    
    #top #wrap_all #header #av-burger-menu-ul > li.av-active-burger-items.social_icon_1 {
        margin-left: 50px;
    }
    

    It applies a 50px margin to the left of the first social icon, consequently moving the other icons.

    Best regards,
    Ismael

    #1299825

    Hey Ismael,

    Thank you very much. They work perfectly now and moved too close to the button above, as well. Can you pls help me move them a bit down back?

    Regards,

    h

    #1300052

    Hi,

    You can actually target the button and apply a top and bottom margin to it.

    .html_av-overlay-side #top #wrap_all #av-burger-menu-ul > li.menu-item-2568 {
        margin-bottom: 20px;
        margin-top: 20px;
    }

    The selector or class name menu-item-2568 is unique to the QUIERO DISEÑAR! button.

    Best regards,
    Ismael

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