[Resolved] Submenu items are not aligned

This topic contains 7 replies, has 2 voices, and was last updated by  Andrew Misplon 1 year, 5 months ago.

  • Author
    Posts
  • #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. 🙂

    #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;
    }
    #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!

    #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;
    }
    #6276

    ParsiKade
    Participant

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

    #6277

    Andrew Misplon
    Keymaster

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

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

    • This reply was modified 1 year, 5 months ago by  ParsiKade.
    #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.

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

Scroll to top