- This topic has 7 replies, 2 voices, and was last updated 7 years, 5 months ago by Andrew Misplon.
- AuthorPosts
- April 10, 2017 at 5:26 am #6259
ParsiKadeParticipantHi,
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).
Hope I can solve this issue with your help, thanks. 🙂
April 10, 2017 at 8:31 am #6263
Andrew MisplonKeymasterHi 🙂
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
ParsiKadeParticipantThank 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 MisplonKeymasterTry 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
ParsiKadeParticipantThe menu looks perfect now.
Thank you very much for your help!April 10, 2017 at 7:55 pm #6277
Andrew MisplonKeymasterAwesome 🙂 Glad to hear that did the trick. All the best.
April 29, 2017 at 7:56 am #6455
ParsiKadeParticipantHi 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 MisplonKeymasterHi 🙂 if you could open a new thread and share a link to your site, that would be awesome. Will attend asap this afternoon.
- AuthorPosts
You must be logged in to reply to this topic.