[Support request] Rtl logo and menu position for multilingual site using wpml

[Lisa]

thanks Tom
I understand my mistake
I still a couple of issues with this header.
1. The logo in the sticky menu is stretching out of proportion – how do I set it to be proportionate
2. MOBILE – HOw do I set the logo to be smaller and aligned left or right with the menu hamburger beside it not below it – it is also stretching out of proportion here too
3. MOBILE – the spacing between the mobile menu items is very big – how do I set the line height for this

see screen capture https://prnt.sc/hgabji

this is the site – https://www.kr-mentoring.co.il/%D7%93%D7%A3-%D7%94%D7%91%D7%99%D7%AA/

[Tom]

1. This code:

img.header-image {
    width: 300px;
}

Should be replaced with this:

.main-navigation:not(.navigation-stick):not(.mobile-header-navigation) img.header-image {
    width: 300px;
}

2. It looks like it’s on the same line right now? Using the mobile header (as you are) is the best way to do this. The CSS above will fix the stretching issue.

3. In Customize > Layout > Primary Navigation, go to the Menu Item Height option and click the mobile icon to adjust the mobile specific height.

Hope this helps 🙂

[Lisa]

Thanks Tom
one further question regarding previous question number three
There is a correlation between menu height and height of logo.
So when I set the menu height as you suggested to reduce line height between menus
this affected the height and obviously the size of the logo … which is now too small.
How can I set the logo height in mobile separately to the height of the menu.

[Tom]

You can target the menu items only with some CSS:

@media (max-width: 768px) {
    .main-navigation .main-nav ul li a {
        line-height: 40px;
    }
}

[Author]

Posts