Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #202666


    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



    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,


    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)?





    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,

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.