Tagged: 

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • December 20, 2013 at 7:38 pm #202666
    MKW270210

    Hi

    I’m using the header with the bottom navigation and wish to include a phone number on the right in line with the centre of the logo. I have followed some advice in the forum, namely adding the following to the quick css:
    #top .social_bookmarks { display: none; }
    #header_meta { display: none; }

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

    #header_main_alternate .container, .main_menu ul:first-child > li > a {
    height: 40px !important;
    line-height: 40px !important;
    }

    #top .main_menu .menu>li:last-child>a {
    padding-right: 10px;
    }

    .phone2 { float: right; color: black; font-size: 30px; padding: 4px; }

    I also added the following to Header.php as advised

    echo “<div class=’phone2′>Call Us: 0151 944 4318</div>”;

    Unfortunately this only seems to add the phone number back to where it started with the standard header settings (ie top right). It also pushes the logo down the heading.

    Can you tell me how to get the phone number vertically centred within the heading space please. Please see fbmproperty.co.uk

    Thanks in advance

    Mark

    December 22, 2013 at 3:10 am #202973
    Devin

    Hey MKW270210!

    You could position it absolutely and then it gets a bit easier: 

    
.phone2 {
color: black;
font-size: 30px;
padding: 4px;
position: absolute;
right: 10px;
top: 54px;
}

    The issue will be what to do with the header on mobile since it doesn’t quite fit any longer. You can use the mobile media query in the custom.css (in the css folder) to add some additional css that will then position how you want for mobile.

    Best regards,
    Devin

    December 23, 2013 at 10:57 am #203238
    MKW270210

    Thanks Devin

    That works a treat. Is there some code to override this on smartphones so that the phone number doesn’t run into the logo (and also reduce the font size on a smartphone)?

    Regards

    Mark

    December 23, 2013 at 3:58 pm #203279
    Yigit

    Hey!

    Please add following code to Quick CSS as well

    @media only screen and (max-width: 767px) {
.phone2 { font-size: 16px; } }
@media only screen and (max-width: 480px) {
.responsive .logo { float: left; } }

    Best regards,
    Yigit

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Phone number within body of header’ is closed to new replies.