Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • May 22, 2013 at 3:28 pm #23661
    gigoz

    Hi,

    I want to add telephone number in between the space where you have logo and the social media icons. Please help.

    I am using enfold and currently using the ‘ Header with social media icons and bottom’ – Header Type.

    Thanks in advance

    May 23, 2013 at 4:59 am #120696
    Ismael

    Hi,

    Edit header.php then find this code

    $phone = avia_get_option('phone');
    
$phone_class = !empty($nav) ? "with_nav" : "";
    
if($phone) echo "<div class='phone-info {$phone_class}'><span>{$phone}</span></div>";

    Cut that and place it below this code

    echo avia_logo(AVIA_BASE_URL.'images/layout/logo.png', false, 'strong');

    Add this on your custom.css or Quick CSS

    .social_header .phone-info {
    
font-weight: bold;
    
height: 30px;
    
line-height: 10px;
    
right: 200px;
    
top: 40px;
    
position: absolute;
    
}
    

    
.social_header .phone-info.with_nav span {
    
border: none;
    
}

    Cheers,

    Ismael

    May 23, 2013 at 5:33 pm #120697
    gigoz

    Hi,

    The code above placed another logo on the top right hand side of the website. Here is what I want:

    I want to add some text carrying phone number, Cart sign etc on the empty white space that exist between the top left logo and the social media icons.

    Here is a link to my site:

    http://tinyurl.com/oj6mp9n

    Regards,

    MK

    May 24, 2013 at 5:13 am #120698
    Ismael

    Hi,

    You didn’t follow the instructions correctly. Cut this code

    $phone = avia_get_option('phone');
    
$phone_class = !empty($nav) ? "with_nav" : "";
    
if($phone) echo "<div class='phone-info {$phone_class}'><span>{$phone}</span></div>";

    Now, paste it under this code which is the code responsible for the logo.

    echo avia_logo(AVIA_BASE_URL.'images/layout/logo.png', false, 'strong');

    Add this on your custom.css to position the phone number correctly.

    .social_header .phone-info {
    
font-weight: bold;
    
height: 30px;
    
line-height: 10px;
    
right: 200px;
    
top: 40px;
    
position: absolute;
    
}
    

    
.social_header .phone-info.with_nav span {
    
border: none;
    
}

    Regards,

    Ismael

    July 19, 2013 at 3:33 pm #120699
    lanbau

    Hi i have done this and it works. however, in mobile mode.. the number clashes with the logo.. how do i edit the css to shift it downwards in mobile responsive mode

    July 20, 2013 at 4:38 am #120700
    lanbau

    Hi anyone?

    July 22, 2013 at 7:54 am #120701
    Dude

    Hi!

    Try following code

    @media only screen and (max-width: 767px) {
    
#header_meta {
    
min-height: 45px;
    
}
    
}

    Best regards,

    Peter

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Phone number bwtween logo and social media icon sppace’ is closed to new replies.