Menu background color and text on mobile devices

Hi!

For some reason the menu background switches color when viewing the site in landscape mode on an Ipad. The color is otherwise dark blue, but in that particular case it switches to black. However it’s only black when viewing the slider picture. The moment you start to scroll down it changes to the right color.

Also, is there any way to change the submenu background color on mobile devices and the submenu text on mobile devices? It’s seems to be the same colors whatever color I choose for the other parts.

My site: http://bamm.fi/

My custom css at the moment:

@media only screen and (max-width: 900px){
#slideshow{
height: 400px !important;
}
}

@media only screen and (max-width: 600px){
#slideshow{
height: 180px !important;
}

.text-slider-section{
top: 40%;
}

}

#slideshow .slides-container .slide-item{
background-position: top center;
background-size: 100%;
}

Hello there,

Try to apply the following CSS code:

.site-header,
#mainnav-mobi {
  background-color: rgba(12,0,66,0.9) !important;
}

#mainnav-mobi ul > li > a{
  color: #9cfcf9;
}  

#mainnav-mobi ul > li > a:hover{
  color: #ffbf00;
}  

Let me know how it goes.

Regards,
Kharis

Hi again! That didn’t really work out. The code resolved the color problem but it affected the desktop version negatively. The blue background is now visible on the header slider on the desktop version all the time, even when on top of the page. If you visit my site on a computer you’ll see what I mean.

Hello there,

Apologies for the misled.

Try to change the following code I previously suggested


.site-header,
#mainnav-mobi {
  background-color: rgba(12,0,66,0.9) !important;
}

to


@media only screen and (max-width:1024px){
  .site-header,
  #mainnav-mobi {
    background-color: rgba(12,0,66,0.9) !important;
  }
}

Let me know how it goes.

Regards,
Kharis