Hi @Ismael

Wow, that works great! Thank you so much, it’s exactly what I was hoping for :)

Hi Andy,

Thank you for your response. I followed the instructions on that post and it *almost* works:
– Mobile menu: The social media icons do not appear at the bottom of the main mobile menu. This is where I’d like them to appear.
– Mobile menu: The social media icons do appear at the bottom after opening the last fold-out menu in the main mobile menu.
– Desktop menu: The social media icons do appear on the main desktop view at the bottom of all the drop-down menus on the main menu. I do not want them to appear there.

Please see the link in the private content box below.

FUNCTIONS.PHP:

function mobile_menu_social_icons(){
?>
<script>
jQuery(document).ready(function(){
  var htmlString = jQuery('.social_bookmarks').html(),
  mobileMenu = jQuery('.responsive #header').find('.main_menu ul li:last-child');
  mobileMenu.append('<ul class="noLightbox social_bookmarks">' + htmlString + '</ul>');
});
</script>
<?php
}
add_action('wp_head', 'mobile_menu_social_icons');

STYLE.CSS:

#mobile-advanced .social_bookmarks {
    margin: 30px 0 0 22px!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;
}
#mobile-advanced .social_bookmarks li a:before {
    color: #666;
    font-size: 30px!important;
}

#mobile-advanced .social_bookmarks li > a:before {
   font-size: 20px;
}

Thanks for your time!

• This reply was modified 7 years, 11 months ago by sweet3. Reason: I noticed that the social icons appear on all drop down menus on the desktop view, not just the last one as originally described. Updated the information accordingly

Hi bkheld, Yigit,

I never did resolve this problem, although I remember discovering that other advanced editor elements on a protected page also ‘broke’ the formatting of the Memberpress login prompt.

I notice that the default login page (i.e. site.com/login) retains its nice formatting – it’s just the protected pages that require login where the formatting gets ‘broken’.

bkheld, did you try the code Yigit provided above – did it solve the issue? I am unable to do too much testing on my live production site. I would appreciate it if you can let me know.

Cheers!

That’s perfect, thank you Yigit!

Hi Elliott,

Thanks for the suggestion. Under Header > Header Layout > Header Style, I have it set to “Default (with borders, active menu)”.

I have tried changing it to “Minimal” and back to “Default” but still the bars are hidden.

I have also tried clearing my browser cache but still the bars are not showing :(