How to change 3rd level dropdowns to go to the right instead of the left

Hi Brendan…there is no setting for it, but you can do some custom CSS either with the Jetpack’s Edit CSS feature (if you use jetpack), or install a plugin called Simple Custom CSS…last option would be to use a child theme (but this is best if you plan to change theme files).

Try this out:

@media (min-width: 783px) {
.primary-navigation li li {
    text-align: left;
  }
.primary-navigation ul li:hover > ul,
.primary-navigation ul li.focus > ul {
    left: 0px;
  }
.primary-navigation ul ul li:hover > ul,
.primary-navigation ul ul li.focus > ul {
    left: 100%;
  }
}

I did a quick try on my local test site and it appears to work without issues. Also, thanks for the info about this flying out on the left. I should have actually made this fly out to the right which is more natural for most. I made a note to make this adjustment on the next update.

Thanks for getting back to me. This did make the 3rd level dropdowns go to the right, but it also made the background of the third links transparent and the background of my second level links more narrow so the text of my second level links are overlapping the dropdown background.

For example:
https://pasorobleswineries.net/wp-content/uploads/2015/06/Nav-error.jpg

Any idea how to fix this?

Thanks

hmmm…try this:

@media (min-width: 783px) {
	.primary-navigation ul ul ul {
		left: -999rem;
		top: -6px;
	}
	.primary-navigation ul li:hover > ul,
	.primary-navigation ul li.focus > ul {
		display:block;
		left: 0px /* line up from the right of the parent */
	}
	.primary-navigation ul ul li:hover > ul,
	.primary-navigation ul ul li.focus > ul {
		left: 100%;
		/*right:100%;*/
	}
}

This works on my end with my test site:

https://www.shapedpixels.com/images/nav.jpg

Similar issue but the last fix was closer, now the 3rd level is below instead of to the right…The white background isn’t extending wide enough the surround the text on the 2nd level and there is no background on the 3rd level.

That’s really the only issue now, as you made it line up correctly on the first fix. All I need now is for the 3rd level to have the white background rather than transparent (but going from the first fix you gave me, not the most recent).

Thanks!

There should be a background to it… in fact if you go to Appearance >> Customize >> Navigation

…there should be a submenu background colour option there. That lets you change the background of sub menu. However, your sub menu should not be transparent, so I am thinking if you made any custom menu changes, something might have been missed. My test site still shows everything working 100%.

Sometimes what I will do is reverse everything and start over again if something is not cooperating.

The only thing I can think of if you are still having display issues, is to revert back to the original menu css, and begin again. Other than that, if it’s still a no-go, then Contact me from my site and I can reply back with the “full” CSS code I have currently setup for the test site for you to try out.

Hi,
My third level menu are not working.Whenever I hover on 3rd level menu ,it activate 2nd level menu.I am using Kada wordpress theme.

@shikha1121….if you are using the Kada WordPress theme (which is a premium theme), you will need to contact their support.

But there support is not working.

Sorry to hear that the developer’s support is not working. I recommend you contact the theme developer directly from their own website, or contact the place you bought the theme from, which I believe is Mojo Themes?

The support forums here are for the free themes that people obtain from the theme directory here at www.remarpro.com.