Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • August 24, 2016 at 7:12 pm #677194
    czphx

    Hi There,

    I am attempting to add a row of social_bookmarks to the #mobile-advanced menu. I have researched this on the forum, and I found the post talking about adding some code to the functions.php as well as the child theme style.css file. This was unsuccessful.

    I am looking for something rather simple, for example, http://www.czphx.com in mobile has them rather simply at the bottom of the pop out menu.

    Once I get them there, I will be playing around with justification and spacing with CSS. I am pretty stuck here and appreciate any guidance.

    In terms of styling for the mobile menu, is it possible to change the look of the 3 bars that you select to open the menu on mobile? I see all the showcase sites keep them, and I cant figure out how to effect more than just the font weight of it, or making it italic.

    THanks again guys, really appreciate your help!

    August 24, 2016 at 7:49 pm #677208
    Vinay

    Hey czphx,

    I noticed the social icons already appear in the mobile menu, did you manage to sort it? Let us know if you need any help with it.

    To change the mobile menu icon please try adding this at the very end of your themes / child themes functions.php file:

    Edit the icon value in the below code with the entypo icons unicode 'icon' => 'ue811'); 

    add_filter('avf_default_icons','avia_replace_standard_icon', 10, 1);
function avia_replace_standard_icon($icons) {
    $icons['mobile_menu']   = array( 'font' =>'entypo-fontello', 'icon' => 'ue811');
    return $icons;
}

    Best regards,
    Vinay

    • This reply was modified 8 years, 3 months ago by Vinay.
    August 24, 2016 at 8:22 pm #677227
    czphx

    The social icons are appearing on czphx.com, which is what I am trying to replicate.

    They do not appear on czphxtest.com/home

    Is that what you see?

    • This reply was modified 8 years, 3 months ago by czphx.
    August 29, 2016 at 8:35 am #678767
    Ismael

    Hi!

    Add this in the functions.php file:

    add_filter( 'ava_main_header', 'ava_main_header_mod', 10, 1);
function ava_main_header_mod( $items )
{
	$social_args = array('outside'=>'ul', 'inside'=>'li', 'append' => '');
	$icons  = '<div class="mobile_social">';
	$icons .= avia_social_media_icons($social_args, false);
	$icons .= '</div>';
	echo $icons;
}

    And use the following css code to adjust the display and position property of the social container:

    @media only screen and (min-width: 989px) {
  /* Add your Desktop Styles here */
  .mobile_social { display:none; }
}

@media only screen and (max-width: 988px) {
  /* Add your Mobile Styles here */
  .mobile_social {
    position: absolute;
    right: 0;
    top: 10px;
  }
}

    Cheers!
    Ismael

    August 30, 2016 at 5:43 pm #679606
    czphx

    Thanks for the reply!

    I have added the code to their respective places, but cannot seem to find it to position it around. I’m still learning, but it all looks like it should work to me, its just not showing up. One thing I noticed is that my buttons in my mobile advanced menu are almost 2x the size now. I dont remember messing with that, but they stick out because they are so large now. Ill look into it and probably realize I did something stupid.

    Let me know if there is something else I need to add to make the social icons work! THanks a ton!

    September 1, 2016 at 8:20 pm #680941
    Vinay

    Hi,

    There seem to be a conflict so please remove all the code added to achieve this and start fresh.

    Please follow this post and modify the css to center the icons https://kriesi.at/support/topic/social-icon-in-mobile-menu/#post-680936

    Let us know if you need any help.

    Best regards,
    Vinay

    September 1, 2016 at 11:13 pm #681056
    czphx

    So I took out all of the info relating to this in my child theme. I used the link you sent from the other post to update my functions and style sheet. Still not seeing anything in the mobile menu.

    Let me know your thoughts! Thanks again!

    September 6, 2016 at 1:53 pm #682625
    Andy

    Hi,

    Please update the theme to the latest version. That should fix any issues you are currently experiencing :)

    To update to the latest version follow the simple instructions here. (Or if you want the super detailed explanation you can read this blog post)

    If that does not help, feel free to reply here and we will take a closer look at the issue.

    Best regards,
    Andy

    September 6, 2016 at 9:56 pm #682859
    czphx

    I am running theme version 3.6.1, is there another update not showing? There may be some confusion, I am working on http://www.czphxtest.com/home

    September 8, 2016 at 11:14 pm #683916
    Vinay

    Hi,

    We modified the code in functions.php as below 

    function mobile_menu_social_icons(){
?>
<script>
jQuery(window).load(function(){

 var htmlString = jQuery('#header_main .social_bookmarks').html(),
  mobileMenu = jQuery('#mobile-advanced .menu-item-top-level-5');

  mobileMenu.after('<ul class="noLightbox social_bookmarks">' + htmlString + '</ul>');
  
});
</script>
<?php
}
add_action('wp_footer', 'mobile_menu_social_icons');

    Added the below in Styles.css

    /* Mobile menu social icons */

#mobile-advanced .social_bookmarks {
   display:inline-block!important;
}
#mobile-advanced .social_bookmarks a:before {
    top: 2px!important;
    margin-left: -13px!important;
}
#mobile-advanced [data-av_iconfont='entypo-fontello']:before {
    font-family: 'entypo-fontello';
}

#top .social_bookmarks li a:before, #mobile-advanced .social_bookmarks li a:before {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: normal;
    content: attr(data-av_icon);
    speak: none;
}

#mobile-advanced ul.social_bookmarks li, #mobile-advanced ul.social_bookmarks li a{
    border:0!important;
    clear:none!important;
    float:left!important;
    max-width:30px;
    display:inline-block!important;
}
#mobile-advanced .social_bookmarks li a:before {
    color: #666;
    font-size: 30px!important;
   font-size: 20px;
}

    The latest version is 3.7.1 if you do not find the update option in the theme Please try this plugin to clear WordPress transients if you do not receive auto updates and make sure your API key is correct: https://wordpress.org/plugins/artiss-transient-cleaner/.

    If it does not help, I am afraid you might need to update the theme manually – http://kriesi.at/documentation/enfold/updating-your-theme-files/

    Unfortunately not all Server environments are able to make use of the auto update feature provided by ThemeForest :/

    Best regards,
    Vinay

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