Hi
We have whitespace displaying at the top when viewing on mobile phone.
We have disabled the menu using code found in a previous support thread;
.special_amp { color: inherit!important; font-family: inherit; font-size: inherit; }
@media only screen and (max-width: 767px) {
.av-main-nav-wrap {
display:none !important;
}
}
Please help! Thanks
Hey,
Thanks for contacting us!
Transparent header is disabled on mobile and since you have a white logo, it is not visible.
Please add following code to Quick CSS field in Enfold theme options > General Styling tab
@media only screen and (max-width: 767px) {
.responsive #top #wrap_all #header.av_header_transparency {
position: absolute;
background: transparent;
}}
That would display transparent header on mobile as well however it would overlap the content. Please edit your homepage and add Whitespace element to the top of the page and choose to hide it on large and medium sized screens in Advanced > Developer Settings tab – https://i.imgur.com/iO2u0vV.png :)
Best regards,
Yigit
Hi Yigit
Thats great, it works but the logo is not central on mobile phone. It looks like it has slightly moved to the left.
Any fix for this?
Thanks
odp
Hi odp,
Please add following code to Quick CSS field in Enfold theme options > General Styling tab
.responsive #top .logo {
margin: auto;
}
Best regards,
Yigit
Yigit, you legend.
That worked, thanks!
Hi,
Glad Yigit could help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.
Best regards,
Mike