the link above from Yigit is best if you want to change it with another “font” icon
if you like to change it with a colored logo this above should work.

i prefer Yigits last link.
if you look to this site (Kriesi Blog Site / Support Forum) and what happend to the logo on shrining this will be one part of the solution. you can let those text stay (the rule of #top .header-scrolled .logo-title on the bottom set opacity to 1) if shrinking has stopped

i changed a bit that code to insert the normal site name and site description of wordpress. So you only have to have the figurative Part of your logo and put in the text via code (this comes to child-theme functions.php):

add_filter('avf_logo_subtext', 'kriesi_logo_addition');
function kriesi_logo_addition($sub)
{
  $sub .= "<span class='logo-title'>";
  $sub .= get_bloginfo( 'name', 'display' );
  $sub .= "</span>";
  $sub .= "<span class='logo-title logo-subtitle'>";
  $sub .= get_bloginfo( 'description', 'display' );
  $sub .= "</span>";
  return $sub;
}

than you have to manage your customisation via quick css – something like this (it comes to quick css):

#top .logo, #top .logo a {
    overflow: visible;
}

#top .logo-subtitle {
    color: #aaa !important;
    font-size: 18px !important;
    top: 20px !important;
}

#top .logo-title {
transition: opacity 0.4s ease-out;
-moz-transition: opacity 0.4s ease-out;
-webkit-transition: opacity 0.4s ease-out;
-o-transition: opacity 0.4s ease-out;
font-size: 12px;
color: #000;
position: absolute;
left: 7px;
top: -7px;
opacity: 1;
white-space: nowrap;
}

#top .subtext {
float: left;
position: relative;
}

#top .header-scrolled .logo-title {
opacity: 0;
filter: alpha(opacity=0);
}

the overflow: visible instruction here is very important

you can see the result on testpage here: http://webers-testseite.de/ikom/

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

.header-scrolled .header_bg {
background-color: #fff !important;
}

you even can use rgba or something else

try it with this code

edit : a sorry i will have a look – you only want the background behind navigation

.header-scrolled #header_main_alternate  {
background-color: #fff !important;
}

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

the header background is set up in class : header_bg
but i don’t know your site so i do not know if this will look nice – maybe a semitransparent header is better like:
(see testsite above too with a semi transparent blue now)

.header-scrolled .header_bg {
    background-color: rgba(70, 120, 174, 0.8) !important;
}

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

well i remember a question i had – that shrinking function does not work on ipad:

so read here for the solution: https://kriesi.at/support/topic/shrinking-header-on-ipad-does-not-work/#post-575345

the code you have to insert in your child-theme functions.php is:

function incluide_custom_js_file() {
   wp_enqueue_script( 'avia-main-child', get_stylesheet_directory_uri().'/js/main.js', array('jquery', 'avia-default'), 2, true );
}
add_action( 'wp_enqueue_scripts', 'incluide_custom_js_file', 100 );

you see that the custom script is loaded out of the folder in your child-theme folder “js”
here is Josues link: https://gist.github.com/josueochoa/66beec77cfa7a21e81b8

the main.js file you see in the link of josue (copy/paste the code in a file and name it main.js) upload that main.js to js folder in your child-theme folder via ftp.

now shrinking on ipad works and if you put in now my code above the things got to work:
see here http://webers-testseite.de/ikom

but where is the difference (if you choose the right settings for masonry) accept that responsive behavior is much better for masonry !

http://webers-testseite.de/ikom/gallery/

click on the first image of masonry gallery please

on Masonry Gallery there is the possibility to insert for each Image a custom link

what kind of header did you use in enfold options ?

shrink – not shrink
sticky etc. pp

thanks
btw:

get rid of that

#avia-menu {
    margin-left: 27%;
}

because your search field is out of sight
instead try this here:
(the margin-left with transform gives a good method to center that ul

.html_header_top.html_bottom_nav_header .main_menu ul:first-child {
    display: inline-flex;
    margin-left: 50%;
    transform: translate(-50%);
    white-space: nowrap;
    width: auto !important;
}

.html_header_top.html_bottom_nav_header #top .main_menu .menu-item-search-dropdown {
    float: left;
}

and for small screens the “social row” is now too big – so start the advanced menu earlier:

@media only screen and (max-width: 865px) {
  .container #advanced_menu_toggle, #advanced_menu_hide {
      display: block;
  }
.main_menu .avia-menu, #header_main_alternate, .fallback_menu {
    display: none;
}
}

your submenu is a bit to small now because of the white-space setting above:

.av-main-nav ul {
    width: 250px;
}

Greetings – and now i’m offline

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/

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

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.

you can try this first on quick css:

html * {
    font-family: "Ubuntu","HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 300;
}

but there are a lot of inline css rules on enfold if you are working with alb (advanced layout editior)
you than have to define an additional rule for that!

f.e.

#top h1 strong, #top h2 strong, #top h3 strong, #top h4 strong, #top h5 strong, #top h6 strong {
    font-weight: 300 !important;
}

i do not know if it is possible to map the 300 weight with the “normal”

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

add_filter( 'avf_google_heading_font',  'avia_add_heading_font');
function avia_add_heading_font($fonts)
{
$fonts['Ubuntu'] = 'Ubuntu:400,300,300italic,400italic,500,500italic,700,700italic';
return $fonts;
}

add_filter( 'avf_google_content_font',  'avia_add_content_font');
function avia_add_content_font($fonts)
{
$fonts['Ubuntu'] = 'Ubuntu:400,300,300italic,400italic,500,500italic,700,700italic';
return $fonts;
}

than you shoud have the choice on enfold options page – font to choose your Ubuntu (it is added at the end of the google fonts list on enfold )
400 is the normal font-weight so i think you should not have the need to change something than.
The rest is perhaps some quick.css (f.e. if you need the headings on 400 too – goto Enfold Options “Advanced Styling” and generate a rule for h1, h2, h3, h4, h5, h6 etc.)