Sub-Menu Issue

• 

  zacheryhenry · Member · Apr 28, 2017 at 1:02 pm

  • Copy link
  • Add topic to favorites

  The blog item on my menu is running into some problems when I add a sub-menu. Notice how the original background is white and the hover is red. How can I target just the submenu background to be black?

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

• 

  thesacredpath · Member · Apr 28, 2017 at 7:26 pm

  • Copy link

  Hi there, the following will do it for you.

  .main-navigation ul ul.sub-menu li {
  	background-color: #000;
  }

  If you look at the structure of the menu, you will see that the submenus have a “submenu” CSS class on the ul element. We can use that and specifically target only the submenu li elements like this.

  .main-navigation ul.sub-menu li {
  	background-color: #000;
  }

• 

  zacheryhenry · Member · Apr 28, 2017 at 7:48 pm

  • Copy link

  Thank you! Will you take a look on mobile and let me know if there is any way to correct the problem with the submenu there?

• 

  thesacredpath · Member · Apr 29, 2017 at 4:05 am

  • Copy link

  Add the following.

  .site-header-menu.toggled-on .sub-menu a {
  	color: #fff;
  	padding-left: 10px;
  }
  .main-navigation a:hover {
  	color: #de2f10 !important;
  }

  The first rule gets the submenu items white when the touch menu is active, and the second turns all menu items red when you hover them. (I assumed you would want that.)

• 

  zacheryhenry · Member · Apr 29, 2017 at 3:44 pm

  • Copy link

  You da bomb!

• 

  thesacredpath · Member · Apr 29, 2017 at 8:59 pm

  • Copy link

  Thanks.