Tagged: enfold, transparent header
-
AuthorPosts
-
May 5, 2016 at 8:02 pm #627964
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.
- This topic was modified 8 years, 7 months ago by xuamox.
May 8, 2016 at 6:06 am #628805Hey 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,
JordanMay 10, 2016 at 8:20 pm #630217Here is the link
May 11, 2016 at 4:26 pm #630819Hi,
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,
YigitJuly 6, 2016 at 10:13 pm #657740Hi 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!
July 7, 2016 at 2:00 pm #658044Hi,
@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,
YigitJuly 7, 2016 at 6:10 pm #658169Thanks 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!
July 7, 2016 at 6:50 pm #658190Hi,
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,
YigitSeptember 7, 2018 at 4:26 am #1006879Hi 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!September 7, 2018 at 6:37 am #1006922Hi,
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,
VinaySeptember 8, 2018 at 1:46 am #1007331Hi 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.September 8, 2018 at 3:26 pm #1007431Hi,
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,
VinayMay 26, 2021 at 8:09 pm #1302456Him 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;
}}May 28, 2021 at 5:43 am #1302746Hi 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,
RikardOctober 30, 2022 at 1:26 pm #1370701Hi 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?
October 30, 2022 at 11:43 pm #1370746 -
AuthorPosts
- You must be logged in to reply to this topic.