Tagged: headers, mobile, transparency
-
AuthorPosts
-
May 7, 2018 at 11:31 pm #952969
Hello. Please see the image in the private area for the issue. The examples shown were all taken from the Home page. Obviously, the colors may change per page depending on the how the section below the header is defined, but this is just an example of how the behavior should be in general when transparency (e.g. Transparent Header with border, Transparent & Glassy, etc.), is defined.
Admin credentials also provided.
Thanks!
May 9, 2018 at 2:39 pm #953952Hey WP Turned,
Thank you for using Enfold.
It’s the html’s default background. Please try this css code.
@media only screen and (max-width: 1024px) { .responsive #top .av_header_glassy.av_header_transparency .header_bg { background-color: #d8b609; opacity: 1; filter: alpha(opacity=100); } }
Best regards,
IsmaelMay 9, 2018 at 3:19 pm #953976Thanks. That satisfies the background color part, but the Transparency Options chosen are still not being respected. Please see this image.
May 9, 2018 at 6:09 pm #954077Hi,
Apologies, I’m not quite sure what you are looking to accomplish with the header. I see you posted the issue, but if possible can you be more clear?
Best regards,
Jordan ShannonMay 9, 2018 at 6:17 pm #954083If you look at the image link, you’ll see the transparent header on media query 736px. Just below that, you’ll see that the logo specified for transparent headers is not appearing. Also, the burger menu and cart icon should be white in color, not black.
May 10, 2018 at 3:44 pm #954621Hi!
That is the default behavior because transparency is disabled on mobile devices. If you want to display the transparent logo, add this css code inside the css media query.
.responsive #top .av_header_transparency.av_alternate_logo_active .logo a > img { opacity: 0; } .responsive #top .av_header_transparency .logo img.alternate { display: block; }
Best regards,
IsmaelMay 10, 2018 at 4:50 pm #954666Thanks. The color of the menu and cart were still skipped, but I fixed those myself (code below).
Your code works when the header is Transparent & Glassy, but not for others. This needs to work for ALL transparent header types.
This issue has been going on for over a year and I was asked to put in a feature request back then
#menu-item-shop {color: #fff; }
.av-burger-menu-main.menu-item-avia-special .av-hamburger-inner,
.av-burger-menu-main.menu-item-avia-special .av-hamburger-inner::before,
.av-burger-menu-main.menu-item-avia-special .av-hamburger-inner::after {color: #fff!important; background-color: #fff!important;}}June 3, 2018 at 1:04 am #965989I’m not recommending this theme to another client if this keeps being ignored. I just had another client contact me because of this. There is no reason that headers should change like this just because of a media query change.
This ticket is also related.
The amount of CSS needed (and it still doesn’t completely do the job) to make transparent headers consistent on all devices sizes…is unacceptable. I’ve been super patient, but I can absolutely show you themes that give an ETA on when something will be fixed.
June 4, 2018 at 9:26 pm #966823Hi,
Actually I have reported the issue to github and Both our developers and Ismael let me know it is working as should.
I did asked Ismael to check again at the topic.Best regards,
BasilisJune 12, 2018 at 8:50 pm #971827Hi!
Good news!
An update is going to be pushed that fixes that issue on the next version :)
Tina has pushed an update!Best regards,
BasilisJune 12, 2018 at 8:52 pm #971830Awesome! Thanks, and I’ll keep my eye out.
-
AuthorPosts
- You must be logged in to reply to this topic.