Logo too big for header? - Forum | JoomShaper
Solved Helix Framework

Logo too big for header?

Asked by Tad Osborn 3 years ago Last activity 2 years ago

Logo overflows the header in all sizes. Why does it seem so difficult to simply increase the logo size?
Do I need to do overrides for the hard coded values that seem to be in the teplate.css?

Accepted answer

Marked as the solution
Tad Osborn Asked this
2 years ago

I solved it by using custom css to force the logo to be smaller.
@media (max-width: 575px){
.logo-image {max-width:300px}
}

5 more replies

Oldest first Newest first Most helpful
Paul Frankowski Senior Staff
3 years ago · edited

Hi Tad,

it's just a simple web math, if you upload big logo image where logo column is size 6 from 12, it will take almost all area (except paddings).

Indeed you have two-three options (as always):

  1. from Template Options > Basic > Logo (change height, that will reduce width as well) and then reduce header height as well, from 200px to 100px. And click SCSS > CSS on/off in advanced tab.
  2. or, upload smaller logo image (max -height 100px)
  3. or, just use custom CSS
.logo-image,
#sp-header .logo,
#sp-header {height: 100px;}
.sp-megamenu-parent > li > a, 
.sp-megamenu-parent > li > span {line-height: 100px;}
#sp-menu > .sp-column {max-height: 100px;}
Tad Osborn Asked this
3 years ago · edited

Thnak you for responding!
How can I change the column size for the built in head templates?

Tad Osborn Asked this
2 years ago

I still can't get my head around the logo hamburger menu header as the preconfigured options seem to have hard coded values that have to be overwritten by custom css. Simple math should be easy to figure out that the logo needs to be smaller than the head row height. What do I need to do to prevent the hamburger menu from falling to the next row?

https://agphysicaltherapy.com/

This is another site with the same issues. I've tried custom header but end up with more issues than it solves.

Mehtaz Afsana Borsha Staff
2 years ago

Glad to know that you have managed to solve the issue.

Log in to reply.