Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • November 20, 2016 at 9:04 pm #714581
    joelcarreon

    Hi! I have a transparent home page. The desktop version is fine but the color on mobile version is not good.

    How do I make the color of the top bar blue on a transparent header on mobile device.

    My problem is only the homepage.

    Thanks!

    Joel

    November 20, 2016 at 9:10 pm #714584
    Yigit

    Hey Joel!

    Please add following code to Quick CSS in Enfold theme options under General Styling tab

    @media only screen and (max-width: 767px) { 
#header_meta * {
    color: #109bc5;
}}

    Regards,
    Yigit

    • This reply was modified 8 years ago by Yigit.
    November 20, 2016 at 9:12 pm #714586
    joelcarreon

    Got it. It worked. Thanks a lot.

    November 20, 2016 at 9:13 pm #714587
    joelcarreon

    One more thing though, the phone number is still in white color. How do we make it the same color as the others?

    November 20, 2016 at 9:17 pm #714589
    Yigit

    Hey!

    Does the issue happen on your phone? Please try adding following code to Quick CSS a well

    @media only screen and (max-width: 767px) { 
.phone-info * {
    color: #109bc5!important;
}}

    If that does not help, please try adding following code to functions.php file in Appearance > Editor 

    function avia_turn_off_detection(){
echo '<meta name="format-detection" content="telephone=no">';
}
add_action('wp_head', 'avia_turn_off_detection');

    Regards,
    Yigit

    November 20, 2016 at 9:19 pm #714590
    joelcarreon

    Yes. It’s only on the phone. It’s working now! Thanks a lot.

    November 20, 2016 at 9:29 pm #714594
    joelcarreon

    Last question, how do i change the top bar color (not the font) on a transparent background in mobile device because my other pages have a blue background on mobile device.

    November 20, 2016 at 9:41 pm #714596
    Yigit

    Hey!

    Please add following code to Quick CSS as well

    @media only screen and (max-width: 767px) {
#header_meta {
    background: red !important;
}}

    If that does not help, please elaborate on the changes you would like to make.

    Cheers!
    Yigit

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