Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #985920

    Hi there,

    I would like to change the order how the social icons appears in the main menu. I’m using the burger menu.

    This is how it looks right now:

    I would like to show the icons this way:

    Thanks for your help

    #986134

    Hey Pedro,

    Can you post a link to your site? so we can take a closer look.
    And try to give a more accurate css code.

    Best regards,
    Nikko

    #986166

    why don’t you add them to Enfold Options in the ordersequence you like to have?

    the top is on the left – the bottom on the right.

    #986167

    ah sorry for missunderstanding – i see your issue now.

    #986302

    well my first input to that was to move the two things in the DOM.
    because I am intensifying my knowledge about jQuery, I have a solution here, but I think it must be easier done. I looked at the helper-main-menu.php, but couldn’t find anything at first sight.
    Maybe there is a solution via the filter: avf_main_menu_nav
    It now depends on which headers you use. You may need to make adjust it for the transparent headers. The icons follow the shrink behavior. You still have to determine the transparency font color.

    this to functions.php of your child-theme

    function change_menu_position() { 
    ?>
    <script>
    (function($){
    	$('.main_menu ul.social_bookmarks').insertBefore($('.main_menu div.avia-menu'));
    })(jQuery);
    </script>
    <?php
    }
    add_action('wp_footer', 'change_menu_position');

    this to quick css:

    #top nav .social_bookmarks {
        margin-top: -20px !important;
        overflow: visible !important;
        height: 40px !important
    }
    .avia-menu.av_menu_icon_beside {
        padding-right: 0;
        margin-right: 0;
        border-right-width: 0;
        border-right-style: none;
    }
    .social_bookmarks li a {
        height: 40px !important;
        line-height: 40px !important;
        width: 40px !important;
    }
    #top .social_bookmarks li {
        width: 40px;
        height: auto !important;
    }
    #top .av-logo-container .social_bookmarks li a {
        border-radius: 50%;
    }
    .av_header_transparency .social_bookmarks li a {
        color: #969696 !important;
    }

    the exact positioning of the social-bookmarks is then only possible if i have your life link afterwards.

    #986306

    Thanks a lot for all your responds.

    This is the link to the website: dev.avmedios.es

    #986307

    Thanks a lot for your respond, it works flawless! Thanks a lot again

    #986314

    if you got a shop cart symbol there – it might be better to move the social bookmarks before the nav
    i changed the code in the topic on top too – because this is more logical to do it the other way round

    function change_menu_position() { 
    ?>
    <script>
    (function($){
    	$('.main_menu ul.social_bookmarks').insertBefore($('.main_menu div.avia-menu'));
    })(jQuery);
    </script>
    <?php
    }
    add_action('wp_footer', 'change_menu_position');

    PS: no adjustment needed as i can see on your site – looks good

    #986320

    Hi,

    Thanks for sharing @guenni007 :-)

    Did you get everything working as it should @pedro? If so, should we close the thread for now?

    Best regards,
    Rikard

    #986335

    Yes. It works perfectly. Thanks a lot, specially to @guenni007

    #986437

    Hi,

    Great, glad you got it working. I’ll close this thread for now then, please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Change the order of the social bookmarks icon’ is closed to new replies.