-
Posts
-
Hi, my current design is set to use the transparent nav. However, on mobile devices, there is a default color bar that sits underneath the logo and sandwich icon. How do I make the header section transparent for mobile?
Right now my nav is locked on desktops, so having a background color makes sense, but on mobile, since the nav is gone on scroll, it would be nice to just have it sit on the graphic from slider/image.
Hey xuamox,
Would you mind providing a precise link to your site, showing the elements in question? We need to be able to inspect them in order to help :)
Best regards,
JordanHi,
Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:
@media only screen and (max-width: 767px) { #top #wrap_all .av_header_transparency { background: transparent; position: absolute!important; }}Best regards,
YigitHi Yigit, This is great. How can I get the transparency to work for smaller devices? I tried adding the following but it didn’t work. Could you please advise as to how to create the transparency?
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
#top #wrap_all .av_header_transparency {
background: transparent;
position: absolute!important;
}}Thank you!
Hi,
@designyvr It does work fine on my end. Please flush browser cache on your mobile device and refresh your page a few times.Best regards,
YigitThanks Yigit. I see the transparency working now. One thing is that the logo is still the regular logo (gray). How can I get it to show the transparent header logo (white logo) when the browser width has been reduced or on mobile devices? Thank you!
Hi,
Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:
@media only screen and (max-width: 767px) { .responsive #top .av_header_transparency.av_alternate_logo_active .logo a > img { opacity: 0 !important; } .responsive #top .av_header_transparency .logo img.alternate { display: block !important; }Please make sure that > sign is not converted to – http://i.imgur.com/IDXRZQ3.png in Quick CSS field.
Best regards,
YigitHi Guys
Is there any way to make the mobile header be transparent when page loads but appears on scroll? i.e. to have the same effect as desktop site.
We are stuck here and nothing seems to work. I made the top header transparent but can’t get over showing it on scroll.
Thanks!Hi,
The code snippets for both the header styles transparent header and the sticky header is available in our documentation.
Just copy both to your site and it should work fine for you :)
Best regards,
VinayHi Vinay
I did the same. First snippet makes the header transparent and 2nd one will make it sticky and they work well as they are intended to. I want to hide entire menu when it is in transparent mode (including logo and menu icon) and the whole thing appears on scroll (this part is already solved).
exactly like desktop.
Let me know if I am missing something from documentation.
Thanks.Hi,
Please open a new ticket and post a precise link to the page, showing the elements in question? We need to be able to inspect them in order to help :)
Best regards,
VinayHim how do you do this for one individual page?
This code worked@media only screen and (max-width: 767px) {
#top #wrap_all .av_header_transparency {
background: transparent !important;
position: absolute!important;
}}Hi amyteslin,
Please use the page ID class, you can find it in the body tag if you inspect the page in question. Your CSS will look something like that this after you have added it:
@media only screen and (max-width: 767px) { .page-id-000 .av_header_transparency { background: transparent !important; position: absolute!important; } }Best regards,
RikardHi Guys,
I have the same issue. I would like to make the background of my logo transparent on mobile and the menu when it flips out, a little bith transparent, not too much but just so you can see a lil website trough it. Is that even possible?
- You must be logged in to reply to this topic.