Submenu items are not aligned

Hi 🙂

Please, try reverting the previous CSS changes made and then insert the following into Appearance > Customize > Additional CSS or a Custom CSS plugin:

.main-navigation ul ul {
    text-align: right;
}

.main-navigation ul ul li {
    margin-right: 0;
}

Thank you Andrew! Your solution worked perfectly fine.

Now one more thing I’d like to ask for your help: How do I align the submenu border with my text? I want the container to move to the left, just like below:

Thanks!

Try remove the previous snippet and add all of the below:

.main-navigation ul ul {
	text-align: right;
}
.main-navigation ul ul li {
	margin-right: 0;
}
.main-navigation ul li ul {
	left: initial;
	left: auto;
	right: 0;
	text-align: right;
}
.main-navigation ul li ul ul {
	right: 100%;
}
.main-navigation ul li .sub-menu .menu-item-has-children>a:after,
.main-navigation ul li .sub-menu .page_item_has_children>a:after,
.main-navigation ul li .children .menu-item-has-children>a:after,
.main-navigation ul li .children .page_item_has_children>a:after {
	content: "\f104";
	font-family: "FontAwesome";
	position: absolute;
	left: 1em;
	padding: 0 0.4952em 0 0;
	right: initial;
	top: 0.5em;
}
.main-navigation ul li .sub-menu a:after,
.main-navigation ul li .children a:after {
	content: none;
}

The menu looks perfect now.
Thank you very much for your help!

Awesome 🙂 Glad to hear that did the trick. All the best.

Hi again,

I hope it’s ok to reply in a topic which is marked as solved.

The last CSS snippet provided by Andrew worked perfect on my site. When I translated the site into English, English menu didn’t show up, which was definitely because of the custom CSS.

After some research, I realized I can use :lang() selector to apply css rules to a specific language (BTW, I’m using Polylang for translating my site to English).

I’ve applied :lang() selector to all css rules that was added before, now English menu looks normal (default theme style), but again my Farsi menu has a problem and submenus look like this:

Here’s how my custom CSS code:

.main-navigation ul ul:lang(fa) {
	text-align: right;
  background-color: #ffff75;
}

.main-navigation ul ul li:lang(fa) {
	margin-right: 0;
}
.main-navigation ul li ul:lang(fa) {
	left: initial;
	left: auto;
	right: 0;
	text-align: right;
}
.main-navigation ul li ul ul:lang(fa) {
	right: 100%;
}
.main-navigation ul li .sub-menu .menu-item-has-children>a:after,
.main-navigation ul li .sub-menu .page_item_has_children>a:after,
.main-navigation ul li .children .menu-item-has-children>a:after,
.main-navigation ul li .children .page_item_has_children>a:after {
	content: "\f104";
	font-family: "FontAwesome";
	position: absolute;
	left: 1em;
	padding: 0 0.4952em 0 0;
	right: initial;
	top: 0.5em;
}
.main-navigation ul li .sub-menu a:after:lang(fa),
.main-navigation ul li .children a:after:lang(fa) {
	content: none;
}

#masthead.site-header.sticky-header.scale.responsive-menu:lang(fa) {
  background-color: #ffff75;
}

.main-navigation ul ul li:hover > a:lang(fa) {
  background-color: #ffbb00;
}

.main-navigation div > ul > li > a:hover:lang(fa) {
  color: #c41202;
}

.main-navigation ul:lang(fa) {
  position: fixed;
}

.main-navigation ul:lang(en) {
  position: inline;
}

Final block [main-navigation ul:lang(en)] solved English menu appearance. I’ve tried to apply :lang() to every block, but no luck. 🙁

Hi 🙂 if you could open a new thread and share a link to your site, that would be awesome. Will attend asap this afternoon.