Applying transparency logo and white font-color on glassy mobile menu

This is working just fine, thank you.

I still noticed that there is a difference comparing the desktop and mobile menu.
On mobile devices all sticky main menu items except for the burger menu show another font-color (#ffa600) than the items on the sticky desktop menu (#000000).

How can I adjust this, so the mobile menu works just as the desktop menu regarding the colors?

The question was not regarding your code snippet but rather another difference I noticed between the mobile and the desktop menu.
As all the colors within the Enfold General Styling > Logo area are set the way I like them, I don’t know why the mobile version displays them otherwise.

Sticky desktop menu: menu links (not active) = #000000
Sticky mobile menu: menu links (not active) = #ffa600

How can I adjust the sticky mobile menu font color without affecting the sticky desktop menu font color?

I think we are getting there fairly quick and yes, the search icon can stay visible on the unfolded burger menu.
The font-color on the sticky mobile menu now is the same color as on the sticky desktop menu.
Some elements still behave differently though:

– The search icon on the sticky mobile menu is #ffa600 (on desktop: #000000).
– Active elements on the sticky mobile menu are #000000 (on desktop: #ffa600).
– The burger menu on the glassy mobile menu stays #ffffff once the menu is unfolded, instead of turning black like the other menu elements and therefore it is invisible.

How can we get those things aligned the right way?

Unfortunately, this doesn’t solve the issues.
Now the following occurs:

– The search icon on the sticky mobile menu is still #ffa600 (on desktop: #000000).
– Active elements on the sticky mobile menu are still #000000 (on desktop: #ffa600).
– The burger menu on the sticky mobile menu is now #000000 and therefore visible when unfolded, but it is also #000000 when the burger menu is collapsed (on desktop: #ffffff).

I would just like the menu to look and behave exactly as it does on the desktop devices.
How can this be fixed?

PS: For future updates wouldn’t it make sense to incorporate the feature, that if one decides to choose a transparent and glassy menu, this also applies to mobile devices?

This is indeed great progress.
As far as I can judge from now, there is only one thing missing:

– Menu elements on the sticky mobile menu are #ffa600 (on desktop: #000000). Only the active element should be displayed in #ffa600.

Do you have a solution for this remaining issue?

It’s working but now another thing seems to be odd again:

– The search and burger icon on the sticky mobile menu are now #ffffff when the menu is collapsed (on desktop: #000000).

Additional fact: Once you resize your desktop view to a mobile size, the search and burger icon color appear as intended (#000000) but if you open the browser on a smartphone, the search and burger icon color all the sudden stay #ffffff when scrolling. I have tested this with two different smartphones.

This is the complete CSS code I’ve been using so far for menu media queries:

@media only screen and (max-width: 767px) {
#top #wrap_all .av_header_transparency, 
.av_header_transparency #advanced_menu_toggle {
background: transparent !important;
position: absolute !important;
}

.responsive #top #wrap_all #header {
position: fixed !important;
}

.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;
opacity: 1 !important;
}

.header_color div .av-hamburger-inner,
.header_color div .av-hamburger-inner::before,
.header_color div .av-hamburger-inner::after {
background-color: #ffffff !important;
}

.header_color #menu-item-search {
color: #ffffff !important;
}

.header_color.header-scrolled div .av-hamburger-inner, .header_color.header-scrolled div .av-hamburger-inner::before, .header_color.header-scrolled div .av-hamburger-inner::after {
background-color: #000000 !important;
}

.header_color.header-scrolled #menu-item-search {
color: #000000 !important;
}

.av-burger-overlay-active #top .av-hamburger-inner,
.av-burger-overlay-active #top .av-hamburger-inner::before,
.av-burger-overlay-active #top .av-hamburger-inner::after {
background-color: #000000 !important;
}

.html_av-overlay-side.av-burger-overlay-active #top #wrap_all #header .menu-item-search-dropdown a {
color: #000000 !important;
}

.html_av-overlay-side #top #wrap_all .av-burger-overlay-scroll #av-burger-menu-ul a {
color: #000000 !important;
}

.html_av-overlay-side #top #wrap_all .av-burger-overlay-scroll #av-burger-menu-ul .current_page_item a {
color: #ffa600 !important;
}
}

Unfortunately this doesn’t work either.
For just applying the transparent & glassy header to mobile devices, this CSS has gotten big very quick.
So far, I have removed all the CSS and stay with the standard solution until an easier solution is available (e. g. a checkbox in the backend).

Is there a place I can submit a feature request?

Alright, thank you.
This ticket can then be closed now.

It seems that this ticket has accidentally been left open.