Logo/Headersize In Mobile View Not Working Correctly - Question | JoomShaper

Logo/Headersize In Mobile View Not Working Correctly

J

Jürgen J. Fischer

Helix Framework 2 years ago

Hi, I have Problem with Headersize in Mobile View. I use predefined Header in Helix Ultimate 2.0.13 and Joomla 4. Logosizes 120 / 100 / 60 Px Headersizes 150 / 130 / 80 Px. Header is shown uncorrectly in Mobile-View, You can see it here https://unterheising.com

I seems that one thing uses 130 Px Header-Height from Tablet-View but I cannot fix this. I use more than 20 Websites with Helix, but this is the first time with this problem

Thank you

0
6 Answers
Pavel
Pavel
Accepted Answer
2 years ago #121809

Hi Jürgen. I’m not sure that I understood you correctly, but how did you set it? Because for this there is no interface settings for the tablet and phone. It can only be configured through CSS.

/*Complete Header height code for Tablet*/
@media (max-width: 991px) {
    #sp-header {
        height: 130px;
    }
    #sp-header .logo {
        height: 130px;
    }
    .logo-image {
        height: 100px !important;
    }
    #offcanvas-toggler {
        height: 130px;
        line-height: 130px;
    }
}
/*Complete Header height code for all Phones - large, small*/
@media (max-width: 767px) {
    #sp-header {
        height: 80px !important;
    }
    #sp-header .logo {
        height: 80px !important;
    }
    .logo-image {
        height: 60px !important;
    }
    #offcanvas-toggler {
        height: 80px !important;
        line-height: 80px !important;
    }
}

By default it is 60px for tablet / large phone and 50px for small phone (comes from template.css). So you can override it with custom sizes via custom css code only.

The best place for custom css code is custom.css file (not template's Custom Css field). And do not edit template.css ever

And yes, for some reasons code for small phone (50px height) was added in Helix 2.0.13. And it is not correct. I would suggest Joomshapet team to completely delete it or fix parameters (logo height, offcanvas toogler height, line-height). And bring all this to the interface settings.

/*Header height code for small Phone from template.css*/
@media (max-width: 575px) {
    #sp-header {
        height: 50px;
    }
    #sp-header .logo {
        height: 60px;  /*incorrect value*/
    }
    #offcanvas-toggler {
        height: 60px; /*incorrect value*/
        line-height: 60px; /*incorrect value*/
    }
}
0
J
Jürgen J. Fischer
Accepted Answer
2 years ago #122149

Hi Pavel

sure there are settings for Desktop, Tablet and Mobile directly in the template settings

Try this:

  1. Template settings
  2. Basic settings
  3. Logo Height (click on one of the three icons in the top row and change between Desktop, Tablet and Mobile). You can insert three different heights
  4. Header Height is the same

I did this all the time before. Now only Mobile-View works not as expected. This must be a Bug.

I can try to fix it with custum.css, but this is not the right way

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 2 years ago #121585

Hi

Thanks for contacting us. Use this custom CSS

@media (max-width: 575px){
#sp-header {
    height: 130px !important;
}
}

Go to system--> https://prnt.sc/tDbSUJh6LiGu --> Default template-->Template options--> https://prnt.sc/A5nlsBvCQsqs And add your CSS there.

-Regards.

0
J
Jürgen J. Fischer
Accepted Answer
2 years ago #121662

Hi, I know this hack, but it seems not to be the problem. This code also comes directly from template.css

Header in mobile should have 80 Px height! It comes with height 130 Px, this is wrong.

There is something in the header, takes wrong height

My values in the template: Logosizes 120 / 100 / 60 Px Headersizes 150 / 130 / 80 Px

Please have a look to unterheising.com and you can see what I mean

This is the very first time I have this issue

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 2 years ago #121687

Then just set your height by using custom CSS which you want.

0
J
Jürgen J. Fischer
Accepted Answer
2 years ago #121787

I did this before. This is not the problem. Doesn't matter with custom css or not. Header is correct 80Px. Logo and BurgerMenu are wrong size and placed on wrong position. It seems that something in Logo oder BurgerMenu gets wrong height.

Please have a look to the site and you see what the problem is. unterheising.com

I had this problem never before. Only with this newest version 2.0.13

0