Support/Ultra Theme/Submenu items are not aligned

[Resolved] Submenu items are not aligned

  • Author
    Posts
  • April 10, 2017 at 5:26 am #6259

    ParsiKade
    Participant

    Hi,

    I’m using Ultra theme in my new WordPress site and it’s really great!
    Though there’s a problem in how submenus are being shown, I’ve tried to fix it by modifying CSS (changing direction / text-align …) but had no luck yet.

    The reason this is happening is because I’m using this theme for an RTL language (Persian / Farsi), and as you can see, there is an unneeded space to the right of the menu items (except the last item).

    Menu items are not aligned

    Hope I can solve this issue with your help, thanks. 🙂

    April 10, 2017 at 8:31 am #6263

    Andrew Misplon
    Keymaster

    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;
}
    April 10, 2017 at 1:13 pm #6267

    ParsiKade
    Participant

    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!

    April 10, 2017 at 1:39 pm #6268

    Andrew Misplon
    Keymaster

    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;
}
    April 10, 2017 at 7:47 pm #6276

    ParsiKade
    Participant

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

    April 10, 2017 at 7:55 pm #6277

    Andrew Misplon
    Keymaster

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

    April 29, 2017 at 7:56 am #6455

    ParsiKade
    Participant

    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. 🙁

    April 29, 2017 at 8:29 am #6457

    Andrew Misplon
    Keymaster

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

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

Scroll to top