Phone number in header

if you don’t like it as a number see here
on my test environment http://webers-testseite.de/ikom/

code is on that:

#menu-item-2836 a[href^="tel:"]::before {
    content: "\e854";
    font-family: entypo-fontello;
    font-size: 25px;
}

#menu-item-2836 span {
    display: none;
}

#menu-item-2839 .avia-menu-text > img {
    position: relative;
    top: 10px;
}

how did you manage that with enfold options?
this is logo left menu below? and how did you manage to show those social icons on that place?

Or is it main menu with only social icons
and a “main navigation” with submenu ?

btw:
add this to your child-theme functions.php :

function avia_add_custom_icon($icons) {
    $icons['phone']  = array( 'font' =>'entypo-fontello', 'icon' => 'ue854');
    return $icons;
}
add_filter('avf_default_icons','avia_add_custom_icon', 10, 1);

// Add new icon as an option for social icons
function avia_add_custom_social_icon($icons) {
    $icons['Phone'] = 'phone';
    return $icons;
}
add_filter('avf_social_icons_options','avia_add_custom_social_icon', 10, 1);

than you have the opportunity to choos on the bottom of that social icon list Phone.

btw instead of appendTo in Yigits Code you can use prependTo if you want it infront of social bookmarks !

a bit css is than needed (margin-right etc to style it a bit)
see here both (my code above) works well too http://webers-testseite.de/ikom/

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

btw the image above is interesting for you i guess:
https://kriesi.at/support/topic/phone-number-in-header-4/#post-667627

because your custom link – is no link

fill in url tel: 0178…
and in Link Text if you want to show the phone number 0178…

than even mobiles could press that link and they will open that phone

Well here we go:

please do not make only one custom menu point out of this ! if it has to work like a real link!

so goto Menu and create two custom links (if you don’t know how to get to class setting for menu points ask please)

the red urls are the links
on phone : tel: … (you see the percent sign – this was automatically generated if you use here a blankspace)
on email: mailto: …

the blue underlined fields are what is shown on menu (here you can set in even images or Names like “Phone” “E-Mail” )

for both i put in css class : shifted

the code in your child-theme functions.php (you have to customise the menu-item id’s) :

function av_move_social(){
?>
 <script>
jQuery(window).load(function(){
jQuery(".av-main-nav > li#menu-item-2845").detach().prependTo('#header .social_bookmarks');
jQuery(".av-main-nav > li#menu-item-2847").detach().prependTo('#header .social_bookmarks')
});
 </script>
<?php
}
add_action('wp_footer', 'av_move_social');

and the css code in quick.css was (here too – customise the menu-item id’s):

.shifted .avia-bullet {
    display: none;
}

#menu-item-2845.shifted {
    margin-right: 80px !important;
}

#menu-item-2847.shifted {
    margin-right: 120px !important;
}

.shifted .avia-menu-text {
    display: inline-flex;
    width: 120px;
}

if you can not find out the item id’s make the menu points and than we will see the rest

and this is what it looks like afterwards: http://webers-testseite.de/ikom/

A Last word on that
the solution with extra social icons
https://kriesi.at/support/topic/phone-number-in-header-4/#post-668478

has one big advantage – these icons stay on mobile devices visible (and in the footer too if you want it)
those shifted links were gone after mobile menu is shown.