Solved Helix Framework

Logo/Headersize in mobile View not working correctly

Asked by Jürgen J. Fischer 3 years ago Last activity 3 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

Accepted answer

Marked as the solution
Pavel
3 years ago · edited

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*/
    }
}
Jürgen J. Fischer Asked this

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

2 more replies

Mehtaz Afsana Borsha Staff

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.

Jürgen J. Fischer Asked this

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

Mehtaz Afsana Borsha Staff

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

Jürgen J. Fischer Asked this

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

Log in to reply.