Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • June 9, 2021 at 8:28 am #1304802
    aussiedropbear

    Hello,

    Building a new site for a client and I am getting stuck on the transparent header and when viewing in mobile and how other pages are then also viewed in mobile when using a different header style.

    My home page is set to ‘transparent & glassy header’. However when in mobile view the small bar above header shows as a white background with white text. So I search the forum and found:

    
@media only screen and (max-width: 767px) {
  .responsive #top #header_meta .social_bookmarks li a,
  .responsive #top #header_meta .phone-info,
  .responsive #top #header_meta .phone-info a {
      color: #444;
  }
  .responsive #top #wrap_all #header_meta .social_bookmarks,
   .responsive #top #header_meta .phone-info {
    display: block;
  }
}

    This worked well as it brought back control of the text color for me but not the background color which i would also like to change. Help?

    Now, my other pages are set to ‘No transparency’ but when i view them on a mobile I get a theme background color that is correct (#0074a8) but the text is black but needs to be white.

    I hope this makes sense?

    i have admin access and a link to the other pages in PC below.

    Any assistance is appreciated.

    Cheers
    John

    June 11, 2021 at 3:46 am #1305156
    Rikard

    Hi John,

    Please try the following in Quick CSS under Enfold->General Styling:

    .home #header_meta {
  background-color: red;
}

#header_meta .phone-info a {
  color: white;
}

    Best regards,
    Rikard

    June 11, 2021 at 5:19 am #1305181
    aussiedropbear

    Thanks Rikard.

    I tried your code but could not see any change?

    Should I remove my previous code in replace of yours or is yours in addition to the code I had?

    I also have a little advanced styling in link in pc. Not sure if this affects anything?

    Cheers
    John

    June 13, 2021 at 3:36 am #1305431
    Rikard

    Hi John,

    Please try this instead:

    .home #header_meta {
  background-color: red !important;
}

#header_meta .phone-info a {
  color: white !important;
}

    Best regards,
    Rikard

    June 15, 2021 at 5:28 am #1305709
    aussiedropbear

    Hi Rikard,

    That is perfect.

    Only one thing – can i have this background color active only when on mobile as I would like to maintain the transparent header when on PC screen.

    Thanks
    John

    June 16, 2021 at 4:02 am #1305915
    Rikard

    Hi John,

    Thanks for the update. If you want this styling to only apply to mobile, then please wrap it in a media query, like so:

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

#header_meta .phone-info a {
  color: white !important;
}
}

    Best regards,
    Rikard

    June 17, 2021 at 2:00 am #1306102
    aussiedropbear

    Many thanks Rikard.

    Please close thread.

    Cheers
    John

    June 17, 2021 at 4:02 pm #1306211
    Jordan Shannon

    Hi,

    If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘transparent header on mobile view using different header styles’ is closed to new replies.