-
AuthorPosts
-
January 29, 2018 at 9:24 pm #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
NeilJanuary 30, 2018 at 5:59 am #904629Hey 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,
MikeJanuary 30, 2018 at 3:24 pm #904950Hey 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
NeilJanuary 31, 2018 at 8:01 pm #905735Hi,
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,
BasilisJanuary 31, 2018 at 11:05 pm #905872Hi 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
NeilFebruary 1, 2018 at 2:32 pm #906295Hi,
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.
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;} }
Best regards,
MikeFebruary 1, 2018 at 10:05 pm #906488Hi 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
February 2, 2018 at 1:20 am #906560Hi,
It looks like you adjusted “#custom_html-2.widget_text” & “#custom_html-3.widget_text” to
“top: 30px !important;”
please try “top: 55px !important;” insteadBest regards,
MikeFebruary 2, 2018 at 10:54 am #906770Hi 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
NeilFebruary 2, 2018 at 4:57 pm #906907 -
AuthorPosts
- You must be logged in to reply to this topic.