Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #904430

    Hi,
    Is there a simple way to add a prominent telephone number at both edges of the logo area please?
    http://www.uk-fire.com/
    Thanks
    Neil

    #904629

    Hey Neil,
    While there is not a easy way to add this to both sides of your logo, you can add a widget next to your header and add your number. Please read this: Adding a widget area to the header
    For an alternative you can try this code in the General Styling > Quick CSS field:

    @media only screen and (min-width: 768px) { 
    .inner-container:after {
    content: '555-55555';
    font-size:20px;
    color: red;
    }
    }
    

    and adjust to suit. Please see screenshot in Private Content area for expected results.

    Best regards,
    Mike

    #904950

    Hey Mike,

    Thank you very much for the code – really appreciate it. I tried the widget option but found the telephone number was not in line with the logo.

    Your css code is fantastic though :)

    Cheeky question – how do I display the telephone number on both sides of the page (or both sides of the logo), please?

    Best Regards
    Neil

    #905735

    Hi,

    There is no such option right now and it owuld require to add a ::before / ::after pseudoselector positioned, which we are not able to provide as it would rquire to modify all the header to make it work properly.

    I think that the best option is to add it inside your logo, as image.
    It could play perfectly.

    Best regards,
    Basilis

    #905872

    Hi Basilis,

    I tried adding the number to the logo image before posting my question.

    The problem is, the wider I make the image, the smaller the image appears in the header.

    Thanks anyway
    Neil

    #906295

    Hi,
    Perhaps this will help, I created two header widget areas by adding this code to the end of my child theme functions.php file in Appearance > Editor:

    add_action( 'ava_main_header', 'enfold_customization_header_widget_area' );
    function enfold_customization_header_widget_area() {
    	dynamic_sidebar( 'header' );
    	dynamic_sidebar( 'header2' );
    }

    then in widgets I created the tow widgets, header & header2, I believe you tried this earlier. In the widgets I added the custom html elements.
    2018-02-01_072337
    These have the ID custom_html-2 & custom_html-3, your maybe different.
    Then I added this code in the General Styling > Quick CSS field:

    @media only screen and (min-width: 768px) { 
    #custom_html-2.widget_text {
        display: inline-block;
        left: 20%;
        padding: 0;
    top: 50px !important;
    }
    #custom_html-3.widget_text {
    display: inline-block;
        right: -70%;
        padding: 0;
    top: 50px !important;
    }
    .av_minimal_header #header_main .container {
        height: 50px!important; 
        line-height: 50px!important; 
    }
    }
    @media only screen and (max-width: 767px) { 
    #custom_html-2.widget_text,#custom_html-3.widget_text {
    display: none !important;}
    }

    It gave this result:
    2018-02-01_071236

    Best regards,
    Mike

    #906488

    Hi Mike,

    Thank you, Thank you, Thank you :)

    I cannot get it all to align horizontally but I think this is acceptable (hopefully?). http://www.uk-fire.com/

    Basilis – this is how you do it :)

    Thank you again..

    Neil

    #906560

    Hi,
    It looks like you adjusted “#custom_html-2.widget_text” & “#custom_html-3.widget_text” to
    “top: 30px !important;”
    please try “top: 55px !important;” instead

    Best regards,
    Mike

    #906770

    Hi Mike,

    I tried different values to try and align the numbers and logo. Yes, 55px aligns them but when I scroll the page and the header compresses, the numbers are sitting on top of the header bar. If I could remove the large white gap above the logo and stop it from automatically shrinking when scrolling down, I could align them all and they would remain fixed.

    Thank you
    Neil

    #906907

    Hi,
    Please try this to remove the action on scroll:

    #header .logo a, #header .logo img {
        max-height: 88px !important;
        min-height: 88px;
    }
    
    #header.header-scrolled .logo img {
        margin-top: -44px;
    }
    

    Best regards,
    Mike

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.