Social Icons in the Footer

can you try this in quick css :

#footer .social_bookmarks {
    position: relative;
    left: -8px;
    top: -15px;
}

#footer .social_bookmarks a::before {
    font-size: 20px;
    color: #fff !important;
}

maybe it is better to define the link color in your enfold options – general styling – footer : highlight color

if it works – don’t know why if you haven’t set the social things on Enfold options – try:

just a moment i did have your wrong quotatin marks

<ul class="noLightbox social_bookmarks icon_count_5">
<li class="social_bookmarks_mail av-social-link-mail social_icon_1"> (Email address hidden if logged out) ?subject=Inquiry from WGM Website"><span class="avia_hidden_link_text">Mail</span></li>
<li class="social_bookmarks_facebook av-social-link-facebook social_icon_2"><span class="avia_hidden_link_text">Facebook</span></li>
<li class="social_bookmarks_instagram av-social-link-instagram social_icon_3"><span class="avia_hidden_link_text">Instagram</span></li>
<li class="social_bookmarks_twitter av-social-link-twitter social_icon_4"><span class="avia_hidden_link_text">Twitter</span></li>
<li class="social_bookmarks_youtube av-social-link-youtube social_icon_5"><span class="avia_hidden_link_text">YouTube</span></li>
</ul>

now you can copy paste

• This reply was modified 6 years, 6 months ago by Guenni007.

yes because you haven’t used the code tag here on board i have transfered your wrong quotation marks.

<ul class="noLightbox social_bookmarks icon_count_5">
<li class="social_bookmarks_mail av-social-link-mail social_icon_1"> (Email address hidden if logged out) ?subject=Inquiry from WGM Website"><span class="avia_hidden_link_text">Mail</span></li>
<li class="social_bookmarks_facebook av-social-link-facebook social_icon_2"><span class="avia_hidden_link_text">Facebook</span></li>
<li class="social_bookmarks_instagram av-social-link-instagram social_icon_3"><span class="avia_hidden_link_text">Instagram</span></li>
<li class="social_bookmarks_twitter av-social-link-twitter social_icon_4"><span class="avia_hidden_link_text">Twitter</span></li>
<li class="social_bookmarks_youtube av-social-link-youtube social_icon_5"><span class="avia_hidden_link_text">YouTube</span></li>
</ul>

and afterwards ( you don’t want to have both footer and socket links) goto enfold options – footer and deselect social icons there

by the way – on Enfold Options – Header – Header behavior – please checkmark that “Let logo and menu position adapt to browser window”
And have a look if this isn’t better for your big wide menu!

On Main Menu – what do you have on : “Menu Items for mobile” ?

can you please insert this into functions.php of your child-theme:

add_action('ava_main_header', function() {
  echo '<div class="button-on-top">';
  echo do_shortcode("[av_button_big label='Donate' description_pos='below' link='manually,https://mydonate.bt.com/events/unite4humanity/461708' link_target='_blank' icon_select='no' icon='ue800' font='entypo-fontello' custom_font='#ffffff' color='custom' custom_bg='#b02b2c' color_hover='custom' custom_bg_hover='#106736' custom_class='' admin_preview_bg=''][/av_button_big]");
  echo '</div>';
});

and this to quick css

#top .av-fullscreen-button .avia-button-fullwidth {
    border-radius: 0;
    padding: 30px 0px;
}

maybe this looks better even on desktop if it is on top

isn’t it what you got ! before ???

this is under the header ( i changed the div to have an id too)

add_action('ava_after_main_title', function() {
  echo '<div id="button-on-top">';
  echo do_shortcode("[av_button_big label='Donate' description_pos='below' link='manually,https://mydonate.bt.com/events/unite4humanity/461708' link_target='_blank' icon_select='no' icon='ue800' font='entypo-fontello' custom_font='#ffffff' color='custom' custom_bg='#b02b2c' color_hover='custom' custom_bg_hover='#106736' custom_class='' admin_preview_bg=''][/av_button_big]");
  echo '</div>';
});

don’t forget the css in quick css:

#top #button-on-top  .avia-button-fullwidth {
    padding: 20px 0px;
}
#button-on-top .avia_iconbox_title {
    font-size: 20px !important;
}

and :

add_action('ava_main_header', function() {
if(wp_is_mobile()){
  echo '<div id="button-on-top">';
  echo do_shortcode("[av_button_big label='100% Donation Policy' description_pos='below' link='manually,https://mydonate.bt.com/events/unite4humanity/461708' link_target='_blank' icon_select='no' icon='ue800' font='entypo-fontello' custom_font='#ffffff' color='custom' custom_bg='#b02b2c' color_hover='custom' custom_bg_hover='#106736' custom_class='' admin_preview_bg=''][/av_button_big]");
  echo '</div>';
}
});

you see the label= that is the text in the button
you see that in the code are custom_bg color and color_hover (hex-codes) so you can change yourself.

and if this fits for you – it makes no sense that you have on mobile this donate menu button:

.avia_mobile #menu-item-668 {
    display: none;
}