Please close the ticket Rikard, thank you.

Fixed it – thank yuou

thank you!

Hi there, this is no longer working and I wonder if I am missing something as my client has asked for a lot of extra code to do with the burger menu.
In short – she wants the burger menu to be white on transparent background before scroll, then the teal colour when scrolling, The menu needs to have a teal background with white icons and writing when open and the icon needs to be white too when the menu (burger) is opened.

Does this look right to you?

/* CSS – Testimonial BG */

.main_color .avia-testimonial-arrow-wrap .avia-arrow, .main_color .avia-slider-testimonials .avia-testimonial-content {
background: #ffffff;
}
/* Color section container width */
#section-container-width .container {
width: 100% !important;
min-width: 100%;
padding: 0;
margin: 0;
}
@media only screen and (max-width: 767px) {
.responsive #top #wrap_all #header .main_menu {
position: fixed;
padding-right: 30px;
}
}
.av_header_transparency .logo {
display: none;
}
.av_header_transparency .av-hamburger-inner, .av_header_transparency .av-hamburger-inner::before, .av_header_transparency .av-hamburger-inner::after {
background-color: white !important;
}
#top .av_header_glassy.av_header_transparency .social_bookmarks li, #top .av_header_glassy.av_header_transparency .social_bookmarks li a {
border-color: rgba(255,255,255,0.25);
color: #009989;
}

#socket .social_bookmarks {
display : none ;
}

#top #av-burger-menu-ul {
padding: 120px 0px 0px !important
}

#av-burger-menu-ul .menu-item-social {
display: table;
width: 100%;
}

#top #av-burger-menu-ul .menu-item-social .avia-menu-text {
display: block;
width: 100% !important;
padding: 15px 50px 5px;
text-align: left !important;
font-style: italic;
}
@media only screen and (max-width: 767px) {
.responsive .logo { display: none !important; }

#advanced_menu_toggle, #advanced_menu_hide {
margin-top: 10px;
}

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

#top .av-burger-overlay li li .avia-bullet,
#top .av-hamburger-inner,
#top .av-hamburger-inner::before,
#top .av-hamburger-inner::after {
background-color: #009989 !important;
}
#top .av-burger-overlay li li .avia-bullet,
#top .av-hamburger.is-active .av-hamburger-inner,
#top .av-hamburger.is-active .av-hamburger-inner::before,
#top .av-hamburger.is-active .av-hamburger-inner::after {
background-color: #fff !important;
}

#top .av_header_glassy.av_header_transparency .social_bookmarks li, #top .av_header_glassy.av_header_transparency .social_bookmarks li a {
border-color: rgba(255,255,255,0.25);
color: #009989;
}

Thanks Ismael, this was happening for my client when she edits it, I have asked her to send me screenshots.

Hi Guenni, I don’t know what you mean by “relative path” I did as I thought I was meant to, which is the #nameofsection can you put it in proper lamens terms for me?

She would also like the social media icons to be added to the base of the burger menu i cannot see this as an option?

Rikard – thank you this worked!
Can you share the code I would require to have the social icons that are in the header on transparent to be a specific colour (#009989) and when it’s in the normal header scrolled down, it can be white?

Super weird! When I did that oeiginally it changed the main menu font colour as well, thanks Rikard, I feel like a numpty!

Thank you Rikard. I want to set the font colour to be different in transparent vs the normal menu (as the font colour in transparent will be the same colour as the menu bar when not transparent).

Hey Rikard, as I shared, I’d already tried all the forum stuff – including the link you shared above, This doesn’t actually seem to mention anything about the mobile sticky burger menu, just the header itself.