Adding submenu items to visible menu + color styling mobile menu

working on https://i4mediation.com, temp passw StellaB.

  1. How do I add submenu items to the visible menu on all devices?
  2. how do I change the color of the menu on mobile?

Hi,

You can add a submenu from the Appearance > Menu. On desktop, the submenu will displayed when user hover the parent menu.

In mobile, user need to tap the + icon on the next of the parent menu. But, sometimes the + icon is not visible to the user.

So, to change the + icon color, you can use this CSS code:

@media (max-width: 1199px){
  .main-navigation li.menu-item-has-children > .subnav-toggle, 
  .main-navigation li.page_item_has_children > .subnav-toggle {
    color: white;
  }
}

And here is to change the menu color on mobile screen:

@media (max-width: 1199px){
  .main-navigation ul li.current_page_item > a, 
  .main-navigation ul li.current-menu-item > a {
    color: white;
  }
  .menuStyle1 .main-navigation a {
    color: yellow;
  }
}

Add the code to Customize > additional CSS.

Regards,

Thnx Awan! Can I add submenu items straight away? I would like the submenu items/links to be visible without the need to click the + icon

Here is to make the submenu always visible on mobile screen:

@media (max-width: 1199px){
	.main-navigation ul ul.sub-menu{
    display: block;
	}
	#site-navigation ul ul li{
		background-color: rgba(247, 247, 247, .1);
		border: none;
	}
	#site-navigation ul ul li a{
		color: rgba(255, 255, 255, .9);
	}
}