[jsegalphotoParticipant]

Hello

I’m wondering how it would be possible to have the social icons appear below the content in mobile only. I have some custom development done currently on this page as an example of my current sidebar layout and customisation. In mobile the icons appear in a nice horizontal line as seen in the screenshot below.

I’m wondering how to get those icons BELOW the content with the same formatting I’ve implemented already. My dev and I were discussing the fact that with icon 9 the header section in desktop – where social icons live, below the menu items – become the sidebar in mobile and get pushed up next to the dropdown hamburger button.

Please test this site link in mobile to see what I mean. http://developer.jsegalphoto.com/tears/
Currently they appear ABOVE the content and I’d like them BELOW as seen in the attachments. Thanks!

[Rue NelModerator]

Hello There,

Thanks for writing in! To move your social icons in smaller screens, please do the following:
#1] Please add the following JS code in the customizer, Appearance > Customize > Custom > Edit Global Javascript

(function($) {
  $(document).ready(function(){
    var W = $(window).width();
    if ( W < 980 ) {
      $('.x-social-global').appendTo( $('.x-main') );
    } else {
      $('.x-social-global').insertAfter( $('.x-nav-wrap.mobile') );
    }
  });

  $(window).on('load resize', function() {
      var W = $(window).width();
      if ( W < 980 ) {
        $('.x-social-global').appendTo( $('.x-main') );
      } else {
        $('.x-social-global').insertAfter( $('.x-nav-wrap.mobile') );
      }
  });
})(jQuery);

#2] And then please add the following css code in the customizer, Appearance > Customize > Custom > Edit Global CSS

.x-main .x-social-global {
  float: none;
  display: block;
  margin: 0 auto;
  text-align: center;
}

.x-main .x-social-global a {
  display: inline-block !important;
  border-radius: 0;
  color: #737373;
  display: block;
  font-size: 22px;
  margin-bottom: 10px;
  padding: 10px;
}

.x-main .x-social-global a:hover {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  color: #a3a3a3;
}

.x-main .x-social-global a i {
  display: inline-block !important;
}

We would loved to know if this has work for you. Thank you.

[jsegalphotoParticipant]

Thanks that worked very well. You’re the best!

[RadModerator]

You’re welcome!

[Author]

Posts