Line-height does not change your previous advices

sarielg · July 2021

Hi

I have been in touch with this issue before and and the question is line-height doesn't change in desktop view or mobile or tablet. I use Header Builder in menu. The site is development environment but you should see it https://sely-fi.hel7.wp-cloud.dev/

Kind regards Sari

Nimetön (kopio).txt

Phil · July 2021

Hey,

Please send us WordPress dashboard access privately thru the contact form, which is on the right side at http://themeforest.net/user/muffingroup#contact, and we will check what might be the reason.

Notice!

Please attach a link to this forum discussion.

Thanks

Phil · July 2021

Please, try the following code instead:

@media only screen and (min-width: 960px){
   .mhb-menu .menu li a span{
      line-height: 40px!important;
   }
}
@media only screen and (max-width: 959px) and (min-width: 768px){
 html .mhb-menu .tabletMobile .menu li a span{
   line-height: 50px!important;
 }
}
@media only screen and (max-width: 767px){
   html .mhb-menu .menu li a span{
      line-height: 60px!important;
   }
}

Thanks

sarielg · July 2021

HI

did not work, the height of the line increased even more.

line-hights.jpg

Sari

Phil · July 2021

But you can decrease it by putting a lower pixels value. For example, instead of 50px, use 20px or whatever suits you.

You can also describe to me what exactly you want to achieve and how it is supposed to look.

Thanks

sarielg · August 2021

Hi

okey I got the desktop and tablet view fixed but there is still a problem with the mobile view.

Mobile mainmenu and submenu font-size should be the same size now the font size is different ,

now the submenu font-size is too big.

Below screenshot

sari

mobile-view.jpg

Phil · August 2021

For the font size and line height use this code:

@media only screen and (max-width: 767px){
    .menu .menu-item .sub-menu span{
        font-size: 13px!important;
    line-height: 30px!important;
    }
}

Line height will also move the plus icon.

Thanks

sarielg · August 2021

Hi

sorry, but submenu -> and its sub-menu line-heights in mobile view still look bad.

If text-size is 14px so line-height should be about 16px but now it still seems much biger.

and the the plus icon is not in the row.

Kind regards Sari

Submenu-sub-menu.jpg

Phil · August 2021

Unfortunately, there is nothing else much I can do with this line-height. As a workaround, you can decrease this font size so the text will not be in two lines but one.

For the plus and minus icons, try the following code:

.mhb-menu .menu li .menu-toggle{
   line-height: inherit!important;
}

Thanks

sarielg · August 2021

Hi

nothing chanced and if I change font-size no-one can read the menu text. But is it posuble get much more wider the menu area

(then I have a possibility get some where submenu text one line) and also if I get line below submenu text then it would be easy to read submenu.

Thanks

mobile-menu-width.jpg

Phil · August 2021

Please, try the following code:

@media screen and (max-width:767px){
   .mhb-menu .menu li ul li{
   width: 100%!important;
   border-bottom: 1px #bbb solid!important;
 }
   .mhb-menu .menu{
      width: 250px!important;
   }
}

Thanks

sarielg · August 2021

Hi

great now I got mobile view looks much better (I increased width 280px and so I got to the same line text)

Thanks

Line-height does not change your previous advices

Comments