Mobile Site Header Flashing on Change in Menu Background Color


First of all, thanks a lot for the Sydney Theme - its quite a cool theme for businesses.

The site header menu is automatically transparent in desktop. For mobile menu, I used this code to set header menu to transparent background colour:

@media only screen and (max-device-width : 1024px){
.site-header {
background-color: transparent;

It is working fine in ipad (landscape mode). However, in ipad (portrait mode) and mobile phone (landscape / portrait mode), the site header section turns white in colour, upon applying the code in custom CSS.

Kindly let me know the solution to fix this.

With best regards,


That was because the .site-header has position: static as default. You can put this line position: absolute; after background-color: transparent;