Change Drop Down Menu Color on Mobile

• 

  daranicholson · Member · Mar 26, 2019 at 4:32 am

  • Copy link
  • Add topic to favorites

  I have the main navigation bar and button the colors that I want on mobile. But I would like to change the background of the menu when I click the “menu” button on the mobile navigation bar. When I hover over it on a desktop it shows a white back ground but when I click the menu button on mobile, the background of the menu stays the same color of the navigation bar.

  http://www.simplydaranicholson.com

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

• 

  daranicholson · Member · Mar 26, 2019 at 4:40 am

  • Copy link

  Or can I have a navigation bar color for desktop and different color for mobile?

• 

  fstat · Staff · Mar 26, 2019 at 8:53 am

  • Copy link

  Hi there,

  It’s not possible to have a different color for the mobile menu nor there’s a way to select a color for the submenu items.

• 

  daranicholson · Member · Mar 27, 2019 at 2:06 am

  • Copy link

  Thank you, at least I can quit trying to figure it out now.

• 

  kokkieh · Staff · Mar 27, 2019 at 7:58 am

  • Copy link

  Hi there,

  This can actually be done. Try the following:

  /* Changes background of expanded
   * menu on mobile devices
   */
  @media screen and (max-width: 768px) {
  	nav#site-navigation.main-navigation.toggled {
  		padding-bottom: 15px;
          }
  	nav#site-navigation.main-navigation div {
  		background-color: #fff;
  		color: #000;
          }
  	button.menu-toggle, nav#site-navigation.main-navigation a {
  		color: #000;
  	}
  	button.menu-toggle:hover {
  		color: #4f4f4f;
  	}
  }

  Please do note that you’re using the self-hosted version of this theme, not the WordPress.com one, so in future for help with this theme please use the Sela forum on WordPress.org instead:

  https://wordpress.org/support/theme/sela/