Tagged: header, mobile, tablet, transparent
-
AuthorPosts
-
March 12, 2021 at 8:02 pm #1287863
I have successfully made a transparent header when the switchover is at 767px. But, every time I use “Menu Items For Mobile” and select “Activate for Smartphones and Tablets”, the transparency for both those under 767 and under 990 breaks. I have tried the following different sets of CSS. Do you have advice?
———————————————————————-
/* Transparent Header For Mobile */
#top #wrap_all .av_header_transparency, .av_header_transparency #advanced_menu_toggle { background-color: transparent; }
.responsive #top #wrap_all #header { position: absolute; }———————————————————————-
/* Transparent Header For Mobile */
@media only screen and (max-width: 990px) {
#top #wrap_all .av_header_transparency, .av_header_transparency #advanced_menu_toggle { background-color: transparent; }
.responsive #top #wrap_all #header { position: absolute; }}———————————————————————-
/* Transparent Header For Mobile */
@media only screen and (max-width: 990px) {
#top #wrap_all .av_header_transparency {
background: transparent;
position: absolute!important;
}}Any suggestions?
March 13, 2021 at 11:14 pm #1288059OK. There is an Enfold bug. I found a workaround, but it is a bug.
When I invoke transparent header under “Main Menu -> Menu Items For Mobile” at 767px, it works fine. When I use the following code, it works perfectly up to 767:
/* Transparent Header For Mobile */
@media only screen and (max-width: 767px) {
#top #wrap_all .av_header_transparency, .av_header_transparency #advanced_menu_toggle { background-color: transparent; }
.responsive #top #wrap_all #header { position: absolute; }
}That is a problem for my site as I need a transparent menu for iPads and tablets. I have spent most of a day playing working on this. Let me summarize:
When I invoke transparent header under “Main Menu – Menu Items For Mobile” at 990px, the transparent header does not work at any width from 1-990. It is completely broken. It should still work up to 767px if I do not change the CSS. It does not.
When I change the CSS to 990px, as shown below, it is still broken at all widths from 1-990px. The code looks like this:
/* Transparent Header For Mobile */
@media only screen and (max-width: 990px) {
#top #wrap_all .av_header_transparency, .av_header_transparency #advanced_menu_toggle { background-color: transparent; }
.responsive #top #wrap_all #header { position: absolute; }
}However, if I leave the setting under “Main Menu – Menu Items For Mobile” at 767 and use the following code, it works at all widths including iPad widths:
/* Transparent Header For Mobile */
@media only screen and (max-width: 1200px) {
#top #wrap_all .av_header_transparency, .av_header_transparency #advanced_menu_toggle { background-color: transparent; }
.responsive #top #wrap_all #header { position: absolute; }
}NOTE: There is nothing magical about 1200px. It is the width at which my text menu bumped up against my logo. So, I want the burger menu at 1200px, which I accomplished with the code at the bottom of this reply.
So, I think there is a problem with the theme code under the “Main Menu – Menu Items For Mobile” setting. I have found a workaround after an entire 8-hour day. But, you may want to look into what is happening here.
For anyone else working on this problem, I invoked the burger menu at 1200px by the following CSS:
@media only screen and (max-width: 1200px) {
.menu-item {
display: none!important;
}
.main_menu {
display: block !important;
}
.av-burger-menu-main.menu-item-avia-special {
display: block!important;
}
}- This reply was modified 3 years, 9 months ago by rmatus. Reason: Added CSS for the burger menu
March 19, 2021 at 3:25 pm #1289203Hi,
Thanks for contacting us and sorry for the late reply!
Background issue seems to be related to CSS selector. Following code works fine on my end
/* Transparent Header For Mobile */ @media only screen and (max-width: 1200px) { .responsive.html_mobile_menu_tablet #top #wrap_all #header { position: absolute; } .html_mobile_menu_tablet #top #wrap_all .av_header_transparency { background: transparent; } }
I will edit our documentation and will update the CSS code. Thanks for reporting :)
Best regards,
Yigit -
AuthorPosts
- You must be logged in to reply to this topic.