Hi,

Thank you for the clarification.

You can add this code in the functions.php file:

function ava_social_bookmarks_cb() {
  $social_args = array('outside'=>'ul', 'inside'=>'li', 'append' => '');
  $social = avia_social_media_icons($social_args, false);
  return $social;
}
add_shortcode('ava_social_bookmarks', 'ava_social_bookmarks_cb');

Then use this shortcode in a text widget.

[ava_social_bookmarks]

You may need to add this css code:

#footer .widget ul.social_bookmarks {
    display: inline-flex;
    gap: 0px 10px;
}

#footer .widget ul.social_bookmarks li {
    border: none
}

Best regards,
Ismael

Hey Monika,

Thank you for the inquiry.

You can create a custom shortcode for the social icons and then place this shortcode in a text widget. Please refer to this thread for more info.: https://kriesi.at/support/topic/social-media-icons-in-footer-8/#post-1397164

Best regards,
Ismael

Hey cpages,
Thank you for pointing this out, please use this css instead:

/************************************

Logo left, Widget center, widget right, menu below

*************************************


CSS Settings:

» Initiate Flexbox
» Topbar
» Header
» Logo
» Menu
» Widget
» Social icons
» Search
» Cart icon

***********************************/


/*--------------------------------

» Initiate Flexbox

--------------------------------*/


/* Header */
.responsive #top #header,
/* Top bar */
.responsive #top #header #header_meta, 
/* Search icon */
.responsive #top #header #menu-item-search a,
/* Cart icon */
.responsive #top #header a.cart_dropdown_link,
/* Social icon */
.responsive #top #header #header_main nav .social_bookmarks,
/* Logo */
.responsive #top #header #header_main .inner-container .logo,
/* Main menu, cart and social icons */
.responsive #top #header #header_main .inner-container .main_menu,
/* Widgets */
.responsive #top #header #header_main .inner-container .widget:nth-child(3),
.responsive #top #header #header_main .inner-container .widget:nth-child(4),
/* Header inner container */
#top #header #header_main .container.av-logo-container .inner-container {
    display: flex;
    position: relative;    
}





/*--------------------------------

» Topbar

--------------------------------*/


/* Top bar */

.responsive #top #header #header_meta {
    flex-basis: 100%;
}




/*--------------------------------

» Header

--------------------------------*/


/* Height outer container */

#top #header #header_main .container.av-logo-container {
    /* Do not change height here */
    /* Auto height: Header takes the height of the contents */
    height: inherit;    
    line-height: inherit;
}



/* Header inner container */

#top #header #header_main .container.av-logo-container .inner-container {
    /* Define header height here */
    height: inherit;
    position: relative !important;
    flex-wrap: wrap;
    /* Define header padding */
    padding: 10px;
    justify-content: space-between;
}



/* Wrappers 
--------------------------------*/


/* Main header ( logo, menu, widgets ) and topbar */

.responsive #top #header {
    flex-wrap: wrap;
}


/*  Logo, Menu, Social Icons and Widgets. */

.responsive #top #header #header_main {
    flex-basis: 100%;
}


/* Transparent header 
--------------------------------*/

.responsive.html_header_transparency #top #wrap_all #header {
    position: absolute;
}

@media only screen and (max-width: 767px) {
    .responsive.html_header_transparency #top #wrap_all #main {
        /* Define padding value for transparent header in mobile */
        /*padding-top: 315px !important; */
    }
}


 


/* Fixed header 
--------------------------------*/

.html_header_sticky.html_mobile_menu_tablet #top #wrap_all #header,
.html_header_sticky.html_header_transparency #top #wrap_all #header,
.html_header_sticky #top #wrap_all #header {
    position: fixed;
}

.html_header_sticky #top #header_main .container,
.html_header_sticky #top .main_menu ul:first-child>li a {
    height: inherit !important;
    line-height: inherit !important;
}


/* Main content padding value should be same as the fixed header height. */

.html_header_sticky:not(.html_header_transparency) #top #wrap_all #main,
.html_header_sticky #top #wrap_all #main {
    /* Define padding only if sticky header is active */
    /*padding-top: 262px ;  */
}

@media only screen and (max-width: 767px) {
    .html_header_sticky #top #wrap_all #main {
        /* Define padding value for sticky header on mobile */
        /*padding-top: 315px !important; */
    }
}






/*--------------------------------

» Logo

--------------------------------*/


/* Logo */

.responsive #top #header #header_main .inner-container .logo {
    order: 2;
    flex-basis: 33%;
    /*width: auto;*/

    /* Define scalable min width of the logo on small screens */
    min-width: 100px;
    
    z-index: 9;
    /* Define scalable max width of the logo on big screens */
    /* Logo width: (auto | 100% | px );  Set auto to display the uploaded image size */
    max-width: 180px;
}


/* Logo image size */

.responsive #top #header .logo,
.responsive #top #header .logo a,
.responsive #top #header .logo img {
    width: auto;
        
    /* Height specification is not required. It is proportional to the max width of the logo */
    height: auto;    
    align-items: center;
    align-self: center;
    justify-content: center;
}


/* Vertically center transparency logo */

.responsive #top #header .logo span img {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}



/*--------------------------------

» Menu

--------------------------------*/


/* Menu outer container: Menu with siblings cart and social icons */

.responsive #top #header #header_main .inner-container .main_menu {
    order: 5;

    /* Define menu width */
    flex-basis: 100%;

    align-items: center;
    align-self: center;
    height: inherit !important;
    background: #f1f1f1;
    justify-content: center;
    margin-bottom: 20px;
}


/* Navigation */

#header .av-main-nav {
    display: flex;
    flex-wrap: nowrap;
}


/*  Activate burger menu  */

@media only screen and (max-width: 1100px) {
    #top #header .av-main-nav>li.menu-item {
        display: none!important;
    }
    #top #header .av-burger-menu-main {
        cursor: pointer;
        display: block!important;
    }
}

@media only screen and (max-width: 767px) {
    /* Mobile menu position fix */
    .responsive #top .av-logo-container .avia-menu {
        display: flex!important;
        align-items: center;
    }
}



/* Mega menu submenu position fix */

.responsive #top #header .avia_mega_div {
    /* Define megamenu submenu top value */
    /*   top: 300px; 
   position: fixed;
   left: 50%;
   transform: translateX(-50%);*/
}



/*--------------------------------

» Widget

--------------------------------*/


/* Widgets */

.responsive #top #header #header_main .inner-container .widget {
    flex-basis: auto;
    padding: 0;
    clear: none!important;

    justify-content: center;
    align-self: center;
    align-items: center;
    z-index: 1;
    margin: 0 10px;
}


.responsive #top #header #header_main .inner-container .widget>div {
    width: 100%;
    line-height: 14px;
    padding: 0 10px;
    background: gold;
}

/* Widgets areas */
.responsive #top #header #header_main .inner-container .widget:nth-child(3){
    order: 3;
    flex-basis: 33%;
}
.responsive #top #header #header_main .inner-container .widget:nth-child(4){
    order: 4;
    flex-basis: 33%;
}

/*--------------------------------

» Social icons

--------------------------------*/


/* Flex support and position fix */

.responsive #top #header #header_main nav .social_bookmarks {
    top: auto;
    margin-top: 0;
    align-items: center;
}


/* Inherit height for flex alignment */

.responsive #top .av-logo-container .social_bookmarks li {
    height: inherit;
}





/*--------------------------------

» Search 

--------------------------------*/


/* Your styles here */


/*--------------------------------

» Cart 

--------------------------------*/


/* Cart position fix */

#top #header #header_main #menu-item-shop a.cart_dropdown_link {
    height: auto;
}

@media only screen and (max-width: 767px) {
    .responsive #top #menu-item-shop.cart_dropdown {
        display: flex;
        align-items: center;
    }
    .cart_dropdown .dropdown_widget .avia-arrow {
        display: none;
    }
}

We will correct the documentation.

Best regards,
Mike

Hey Angelo,
Try adding this solution to create social icons shortcode that you can add to a widget in your sidebar.

Best regards,
Mike

Hi,
For email, phone, map, try this in your widget:

<ul class="contact2">
    <li class="mail"><span class="in2"><a href="mailto: (Email address hidden if logged out) ">[av_font_icon icon='ue805' font='entypo-fontello' size='20px'][/av_font_icon] (Email address hidden if logged out) </a></span></li>
    <li class="phone"><span class="in2"><a href="tel://1-555-555-5555">[av_font_icon icon='ue854' font='entypo-fontello' size='20px'][/av_font_icon]1-555-555-5555</a></span></li>   
    <li class="map"><span class="in2"><a href="https://maps.google.com">[av_font_icon icon='ue842' font='entypo-fontello' size='20px'][/av_font_icon]maps.google.com</a></span></li>
</ul>

the expected results:

If you are not using a child theme I recommend the WPcode plugin this plugin supports PHP code snippets, JavaScript code snippets, & CSS code snippets.
When you add the custom social bookmarks widget code to the WP Code plugin ensure that the “type is set to PHP:



also add the css:

#top .socialbookmarks-widget .social_bookmarks {
    float: left;
    margin: 15px 0 0 ;
    position: relative;
}

#top .socialbookmarks-widget .social_bookmarks li {
    float: left;
    clear: right !important;
}

the expected results:

Please note that these icons are from your social profiles settings:

Best regards,
Mike

Hey sharynt3,
Try this social icon widget code.
Or this social icon shortcode
For icons next to phone or email in footer widget, try this solution.

Best regards,
Mike

Hey Chrisxx1982,
Thank you for your patience and the screenshot, please see this shortcode created by Guenni007, you can add it to a custom HTML widget in your footer widget area.

Best regards,
Mike

Hi,
I changed the css to this:

/* Icon color on hover */
#footer .widget .social_bookmarks li a:hover {
  color: #ffffff!important;
  background: #0a66c2!important;
  transition: all .35s ease;
}
.widget .social_bookmarks li a:hover:before {
  color: #ffffff;
}

please clear your browser cache and check.

Best regards,
Mike

Hi,

Thank you for the update.

Please look for this css rule to adjust the hover state.

/* Icon color on hover */
.widget .social_bookmarks li a:hover:before {
  color: #000;
  transition: all .35s ease;
}

Replace it with:

/* Icon color on hover */
.widget .social_bookmarks li a:hover:before {
  color: #ffffff;
  background: #0a66c2;
  transition: all .35s ease;
}

Best regards,
Ismael

Hi,
Thank you for your patience and the link to your site, I couldn’t find the above css on your site, but I believe the reason it doesn’t work is because the css is for the social share buttons and not the custom [social-bookmarks] shortcode that you are using. Nonetheless try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

/* Icon style */
.widget .social_bookmarks li a {
  width: 30px!important;
   height: 30px!important;
   line-height: 24px !important;
   border-radius: 30px!important; 
   padding: 3px 0 !important;
   background: #fff !important;
}
/* Icon color */
.widget .social_bookmarks li a:before {
  color: #00737A;
  transition: all .5s ease;
}
/* Icon color on hover */
.widget .social_bookmarks li a:hover:before {
  color: #000;
  transition: all .35s ease;
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hey zimbo,

Thank you for the inquiry.

You can add this css code to adjust the breakpoint of the header and make sure that it displays the same on relatively smaller screens as it does on tablet view.

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 1150px)
{
	.responsive .main_menu ul:first-child > li > a {
		padding: 0 10px;
	}

	.responsive #top .header_bg {
		opacity: 1;
	}

	.responsive #main .container_wrap:first-child{
		border-top:none;
	}

	.responsive .logo{
		float:left;
	}

	.responsive .logo img{
		margin:0;
	}

	.responsive.html_top_nav_header.html_mobile_menu_tablet #top .social_bookmarks {
		right: 50px;
	}

	.responsive.html_top_nav_header.html_mobile_menu_tablet #top #wrap_all #main{
		padding-top:0;
	}

	.responsive.js_active .avia_combo_widget .top_tab .tab{
		font-size: 10px;
	}

	.responsive.js_active .avia_combo_widget .news-thumb{
		display:none;
	}

	.responsive #top #wrap_all .grid-sort-container .av_one_sixth{
		width:33.3%;
		margin-bottom: 0;
	}

	.responsive body.boxed#top,
	.responsive.html_boxed.html_header_sticky #top #header,
	.responsive.html_boxed.html_header_transparency #top #header{
		max-width: 100%;
	}

	.responsive.html_header_top.html_header_sticky.html_bottom_nav_header.html_mobile_menu_tablet #main{
		padding-top: 88px;
	}

	.responsive.html_header_top.html_header_sticky.html_bottom_nav_header.html_top_nav_header.html_mobile_menu_tablet #main{
		margin-top:0;
	}

	.responsive #top .av-hide-on-tablet{
		display:none !important;
	}

	/*new menu*/
	.responsive.html_mobile_menu_tablet .av-burger-menu-main{
		display: block;
	}

	.responsive #top #wrap_all .av_mobile_menu_tablet .main_menu{
		top:0;
		left:auto;
		right:0;
		display:block;
	}

	.responsive.html_logo_right #top #wrap_all .av_mobile_menu_tablet .main_menu{
		top:0;
		left:0;
		right:auto;
	}

	.responsive #top .av_mobile_menu_tablet .av-main-nav .menu-item{
		display:none;
	}

	.responsive #top .av_mobile_menu_tablet .av-main-nav .menu-item-avia-special{
		display:block;
	}

	.responsive #top #wrap_all .av_mobile_menu_tablet .menu-item-search-dropdown > a {
		font-size: 24px;
	}

	.responsive #top .av_mobile_menu_tablet #header_main_alternate{
		display:none;
	}

	.responsive.html_mobile_menu_tablet #top #wrap_all #header {
		position: relative;
		width:100%;
		float:none;
		height:auto;
		margin:0 !important;
		opacity: 1;
		min-height:0;
	}

	.responsive.html_mobile_menu_tablet #top #header #header_meta .social_bookmarks{
		display:none;
	}

	.responsive.html_mobile_menu_tablet #top .av-logo-container .social_bookmarks{
		display:none
	}

	.responsive.html_mobile_menu_tablet #top .av-logo-container .main_menu .social_bookmarks{
		display:block;
		position: relative;
		margin-top: -15px;
		right:0;
	}

	.responsive.html_logo_center.html_bottom_nav_header .av_mobile_menu_tablet .avia-menu.av_menu_icon_beside{
		height:100%;
	}

	.responsive.html_mobile_menu_tablet #top #wrap_all .menu-item-search-dropdown > a {
		font-size: 24px;
	}

	.responsive.html_mobile_menu_tablet #top #main .av-logo-container .main_menu{
		display:block;
	}

	.responsive.html_mobile_menu_tablet.html_header_top.html_header_sticky #top #wrap_all #main{
		padding-top: 88px;
	}

	.responsive.html_mobile_menu_tablet.html_header_top #top #main {
		padding-top: 0 !important;
		margin: 0;
	}

	.responsive.html_mobile_menu_tablet.html_top_nav_header.html_header_sticky #top #wrap_all #main{
		padding-top:0;
	}

	.responsive.html_mobile_menu_tablet #top #header_main > .container .main_menu  .av-main-nav > li > a,
	.responsive.html_mobile_menu_tablet #top #wrap_all .av-logo-container {
		height:90px;
		line-height:90px;
	}

	.responsive.html_mobile_menu_tablet #top #header_main > .container .main_menu  .av-main-nav > li > a{
		min-width: 0;
		padding:0 0 0 20px;
		margin:0;
		border-style: none;
		border-width: 0;
	}

	.responsive.html_mobile_menu_tablet #top .av_seperator_big_border .avia-menu.av_menu_icon_beside{
		border-right-style: solid;
		border-right-width: 1px;
		padding-right: 25px;
	}

	.responsive.html_mobile_menu_tablet #top #header .av-main-nav > li > a, .responsive #top #header .av-main-nav > li > a:hover{
		background:transparent;
		color: inherit;
	}

	.responsive.html_mobile_menu_tablet.html_top_nav_header .av-logo-container .inner-container{
		overflow: visible;
	}

}

Best regards,
Ismael