-
Posts
-
Hi guys!!
Hope you are doing great. I just switched the home page to a full width slider on top and the mobile is not respecting the transparent header so the slider is partially covered.
Here’s the site: http://bodasyweddings.com
Help!!
Thank you!!
Warmly,
Havi
Hey Havi,
Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
@media only screen and (max-width: 767px) { #top #wrap_all .av_header_transparency { background-color: transparent; } }If you need further assistance please let us know.
Best regards,
VictoriaHi Victoria!
It partially worked:
/*Home Page Transparent Header*/
@media only screen and (max-width: 767px) {
#top #wrap_all .av_header_transparency {
background-color: transparent !important;
}
}And I don’t know if this is causing it, but the slider text only shows partially. (I didn’t see it move upwards) :(
I am sharing with you the CSS I already have (maybe it clashes with the new Mobile Menu rework but I had it for a long while):
/*make navigation appear on mobile*/
@media only screen and (max-width: 767px) {
.responsive #top .avia-post-nav {
display: block !important;
}}and:
/* Sticky header on Mobile */
@media only screen and (max-width: 767px) {
#header {
position:fixed !important;
top: 0;
}}
@media only screen and (max-width: 767px) {
.responsive #top #main {
padding-top:80px !important;
}}
@media only screen and (max-width: 767px) {
#top .template-shop .container {
padding-top:80px !important;
}}Thank you!!!!!
Havi
Hi Victoria,
I tried adding it to the CSS on the child theme but it’s not working properly.
Please, help!!
Thank you,
Havi
Hi guys,
This happens on all installations I’ve checked that have a transparent header:
It must be a bug.
How can I help you resolve it?
Best,
Havi
Hi,
I have checked each of the links above and http://bodasyweddings.com could use this css:@media only screen and (max-width: 767px) { #top #wrap_all .av_header_transparency { background: transparent!important; position: absolute!important; }}as you can see the slider is being covered by the header:
After the css you can see it is a full image:
But all of the other ones have the full image:
Best regards,
MikeHi Mike,
The top Menu should be transparent as it used to be. You cannot see the whole image – worse, you cannot see the whole text and action buttons.
Redshoemovement has a much shorter slider than bodasyweddings.
The logo should be transparent and the menu should be white just like on the desktop version.
This used to work so maybe it’s a bug. I didn’t notice until I had to change the home page and went to see it on mobile. (iPhone7plus shows even less than yours)
Any other ideas?
Thank you!!
Havi
Hi Mike,
This is from the Enfold Header Transparency Options settings:
What is header transparency
When creating/editing a page you can select to have the header be transparent and display the content (usually a fullwidth slideshow or a fullwidth image) beneath. In those cases you will usually need a different Logo and Main Menu color which can be set here.The different logo is there and the background color for transparency is empty.
I have checked all the settings and the only thing I can think of is that the CSS I shared with you before somehow is not behaving as it used to and needs to be modified. Here it goes again:
/* Sticky header on Mobile */
@media only screen and (max-width: 767px) {
#header {
position:fixed !important;
top: 0;
}}
@media only screen and (max-width: 767px) {
.responsive #top #main {
padding-top:80px !important;
}}Does this help?
Thank you for your kind assistance!
Warmly,
Havi
I tried something else but the mobile header still misbehaves:
– I switched the page header transparency to invisible and it still shows on mobile
– I switched it to transparent & glassy and it still shows the same on mobileSomehow I think the mobile version is not recognizing it’s a dark background with transparent header.
Hope this additional data helps too!!
Hi guys,
Any news? Would you like me to grant you admin access to one of these sites? Please, let me know.
Thanks,
Havi
Hi,
Yes please that would be helpful.
Please post us your login credentials (in the “private data” field), so we can take a look at your backend.- Install and activate ” Temporary Login Without Password “.
- Go to ” Users > Temporary Logins ” on the left-side menu.
- Click ” Create New “.
- Add the email address for the account ( you can use (Email address hidden if logged out) ), as well as the ” Role ” making that the highest possible and the expiry about four days
( do be sure that we have enough time to debug ). - Click ” Submit “.
- You’ll now have a temporary account. Please provide us here in the private section the URL, so we can login and help you out.
When your issue is fixed, you can always remove the plugin!
If you prefer to not use the plugin, you can manually create a admin user and post the login credentials in the “private data” field.Best regards,
BasilisHi Basilis!!
No problem at all! Your user has been created a long time ago. Sending you the credentials. If you notice, the Desktop menu does not change the color with dark background.
Let me know what I need to change so I can apply it to the 5 sites!
Thank you so much!!
Best,
HaviHi Havi,
I don’t think any of us have changed the password, so maybe you can reset it and send new details?
Best regards,
RikardHi,
The header looks ok now. I found these css modifications.
.responsive #top #main { padding-top: 80px !important; } #top #wrap_all .av_header_transparency { background: transparent !important; position: absolute!important; } #header { position: fixed !important; top: 0; }Are you trying to make the header stick on mobile view?
Best regards,
IsmaelHi Ismael,
Yes, I already had the header sticking on mobile view for a long while.
I still see it with a white background on my cell and it’s not recognizing the dark background with Safari on the desktop. Cleared the cache and still nothing.
Desktop with Chrome recognizes the dark background and displays text in white but on mobile it’s not using the transparent logo and the hamburger menu is not white. So it’s not recognizing the dark background again. :(
Help!
Havi
Hi Ismael,
Did you make any changes?
The code that was added:
/*Home Page Transparent Header*/
@media only screen and (max-width: 767px) {
#top #wrap_all .av_header_transparency {
background: transparent !important;
position: absolute!important;
}}Did not make any difference. I removed it and the header displays the same. It’s not recognizing the dark background and on some devices it makes the header transparent and other not.
Does this help?
Hi Ismael!
The reason the mobile menu does not cover the slider anymore is because I fixed it. Added height to the element. The problem that remains has more to do with the proper recognition of dark background when header is transparent.
Maybe the sticky header is causing this but I need it to be sticky. This was the ticket when that was added:
Is it possible that the code is detecting the padding instead of the transparent background? If so, what is the proper code to make the header sticky on mobile?
Thank you!!
Havi
Hi,
The problem that remains has more to do with the proper recognition of dark background when header is transparent.
I’m sorry but I’m not sure what you meant by “recognition of dark background when header is transparent”. Could you please provide a screenshot?
P.S: I hope your family are ok there. Take care.
Best regards,
IsmaelHi Ismael!!
Thank you for your kind words… power is back (hopefully it will stay that way) and it was kind of scary but thank goodness Irma is on its way to being dissolved into a low pressure system…
I hope everybody recovers soon and they are all safe.
Anyway, I took several screenshots on different browsers and mobile devices and added notes to each. Maybe this is more helpful to show you what I mean.
I have a feeling that for some reason the code that recognizes the dark/light background may be receiving the wrong input. But this is just my own hunch from looking at the code and trying to follow the logic. I defer to you. You can see the behavior of the header is not constant.
The images will explain better than me. I hope.
Best regards,
Havi
PS: Please feel free to ask for more info if needed. Count on me.https://drive.google.com/file/d/0BwocoQNWz08YYUlxNFh2QjJpdDA/view?usp=sharing
https://drive.google.com/file/d/0BwocoQNWz08Yc2NQWC1sQ1o1Vlk/view?usp=sharing
https://drive.google.com/file/d/0BwocoQNWz08YVHRVeTc2TEk4OHc/view?usp=sharing
https://drive.google.com/file/d/0BwocoQNWz08YbGdwRzhqNy1QeWs/view?usp=sharing
https://drive.google.com/file/d/0BwocoQNWz08YbklnMW15V2pRcDQ/view?usp=sharing
https://drive.google.com/file/d/0BwocoQNWz08YVmVKaUp4XzVfX0U/view?usp=sharingHi,
We fixed the transparent header font color. You can actually find another font color option in the Header > Transparency options panel. However, I can’t reproduce the issue described in the “Android Galaxy” and “iPhone 6 plus” screenshots. This is what I get on my end.
Please note that the transparent header is only enabled on screen sizes larger than 768px (iPad/Tablet and Desktop view).
Best regards,
IsmaelHi Ismael!!
Thank you so much!!! How did you fix it so I can d the same to the other sites?
I will try to find somebody that actually has one of those devices and see if it really happens. Chrome gets close but is not perfect. Even on iPhone I get a different display than what Chrome shows me.
Thank you so much!!
Havi
- You must be logged in to reply to this topic.