Navigation Menu Changes Color between Desktop and Mobile View

• 

  kleankuisine · Member · Jun 26, 2014 at 3:50 pm

  • Copy link
  • Add topic to favorites

  Hi,

  I have edited the Adelle theme to make my navigation bar white with dotted top and bottom border. This displays when I view my site on my desktop or tablet. However, when I view my site on my smartphone, the navigation is black (as in the original Adelle theme). I know I can use media queries to target the CSS for smartphone view only, but what CSS code can I use to change the color of the navigation bar. I’ve been fiddling around with possibilities, but can’t seem to get it right. Please help!

  Thanks,
  Anna

  The blog I need help with is: (visible only to logged in users)

• 

  designsimply · Member · Jun 26, 2014 at 8:06 pm

  • Copy link

  To revers the black and white colors in the responsive design mobile menu in the Adelle theme, add this to the bottom of your Appearance > Customize > CSS editor:

  .menu-toggle {
  	background: #fff;
  	color: #000;
  }
  .main-small-navigation ul li a {
  	color: #000;
  }
  
  @media screen and (max-width: 600px) {
  	.menu-toggle,
  	.main-small-navigation ul.nav-menu.toggled-on {
  		background: #fff;
  	}
  }

• 

  kleankuisine · Member · Jun 26, 2014 at 11:15 pm

  • Copy link

  Thank you!!