Mobile menu adding social icons / styling - Support | Kriesi.at

Viewing 10 posts - 1 through 10 (of 10 total)

Author

Posts
August 24, 2016 at 7:12 pm #677194

czphx
Participant

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
Inactive Moderator
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, 2 months ago by Vinay.
August 24, 2016 at 8:22 pm #677227
czphx
Participant
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, 2 months ago by czphx.
August 29, 2016 at 8:35 am #678767
Ismael
Moderator
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
Participant

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
Inactive Moderator

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
Participant

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
Inactive Moderator

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
Participant

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
Inactive Moderator
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.