ParsiKade

Forum Replies Created

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • in reply to: Customize top menu to work with rtl and ltr languges #6503

    ParsiKade
    Participant

    Yes!! Problem solved.

    Thank you very much for your help, Andrew.

    in reply to: Customize top menu to work with rtl and ltr languges #6487

    ParsiKade
    Participant

    Yes, I removed it and now it looks like this:

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

    But as I said, it didn’t solve the problem.

    in reply to: Customize top menu to work with rtl and ltr languges #6483

    ParsiKade
    Participant

    I deleted it but the problem still exists.

    Here’s the selector’s code:

    .main-navigation ul ul {
    	text-align: right;
            background-color: #ffff75;
    	margin-right: 1.78571em;
    }

    I removed ‘margin-right’ line. But unfortunately it didn’t solve the problem.

    in reply to: Customize top menu to work with rtl and ltr languges #6476

    ParsiKade
    Participant

    Trying to get rid of the below block expands the menu and shows menu items in two lines which is not what I’m looking for:

    .main-navigation ul {
      position: fixed;
    }

    I added the code you submitted and now menu items spacing looks good, though now submenus items are not aligned again. I’m sure it has something to do with ‘.main-navigation ul li:last-of-type’:

    Now if I add the ‘.main-navigation ul {position: fixed;}’ block again, menu looks like below. Everything is in order except submenu items alignment:

    • This reply was modified 8 months, 3 weeks ago by  ParsiKade.
    in reply to: Customize top menu to work with rtl and ltr languges #6467

    ParsiKade
    Participant

    Awesome! It works perfect. Now two more things and I’ll master Ultra theme’s menu. 😀

    1. in Farsi language, some menu items had wrong spacing between them, I could solve this problem by rearranging menu items (I don’t know what caused it, but when some menu items are located next to each other, they don’t seem to follow spacing rules). Now, this is happening again for my language switcher. I think below image describes what I want to say better:

    How can I resolve this issue and make “English” and “تماس با ما” have normal spacing?

    2. As it’s a responsive menu, when on mobile or tablet, it becomes a hamburger menu, what CSS property should I edit to change its color and make it rtl?

    Thank you!

    in reply to: Customize top menu to work with rtl and ltr languges #6465

    ParsiKade
    Participant
    This reply has been marked as private.
    in reply to: Customize top menu to work with rtl and ltr languges #6461

    ParsiKade
    Participant

    Hi!
    Thanks for your reply.

    I also targeted that rule for lang(fa), but doesn’t help and the problem is still there.

    It’s really confusing, this same code works perfectly fine without lang() selector, but then when I add lang() to rules, the problem I mentioned in my previous post occurs.

    By the way, now my CSS looks like this, but the results are same as before:

    .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:lang(fa),
    .main-navigation ul li .sub-menu .page_item_has_children>a:after:lang(fa),
    .main-navigation ul li .children .menu-item-has-children>a:after:lang(fa),
    .main-navigation ul li .children .page_item_has_children>a:after:lang(fa) {
    	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;
    }

    As I said my English menu is working right now and has Ultra theme’s default style thanks to the last applied rule (.main-navigation ul:lang(en)).

    • This reply was modified 8 months, 4 weeks ago by  ParsiKade.
    in reply to: Submenu items are not aligned #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 8 months, 4 weeks ago by  ParsiKade.
    in reply to: Submenu items are not aligned #6276

    ParsiKade
    Participant

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

    in reply to: Submenu items are not aligned #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!

Viewing 10 posts - 1 through 10 (of 10 total)
Scroll to top