How Enlarge Logo Height - Question | JoomShaper
SP Page Builder 6 is Here! Learn More →

How Enlarge Logo Height

MS

Martin Seidl

Template 1 month ago

Hi Team, I use J5, helix 3, oneclip template. i dont know how to have the logo height changed for in helix 3 I cant find any way. see https://www.patlector.net/

0
10 Answers
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 1 month ago #202412

Hi

Thanks for contacting us and sorry for your issue. I am sorry to say that in this template there is no default option to do that. You can change the height by using custom CSS. You can use this CSS in your custom.css file

#sp-header .logo{
  height: 80px !important;
}

-Regards.

0
MS
Martin Seidl
Accepted Answer
1 month ago #202420

thnx I embedded that code but that does not work for I guess the div around for the whole menu does not allow that space of height 120px for example.

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 1 month ago #202448

Martin, in that case increase header height and menu items line-height first.

#sp-header {height: 120px;}
#sp-logo {padding-right: 0; padding-left:0;}
#sp-menu .sp-megamenu-parent > li > a {line-height: 120px;}

then make logo a little bit bigger.

By default it has 80px, so you have to use 100px in shared by @Mehtaz CSS code line. In Helix3 template options > Custom CSS area, at the top.

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 1 month ago #202450

If you need even a bigger logo (120px), then you have to change default column grid of the header. As you know (?) in all Helix-based templates is based on bootstrap columns. In that template logo column has only "2" (desktop) and menu "8" (desktop) and top3 also "2" (desktop). In means to get wider logo, you have to reduce menu width from 8 to 7, and give that extra 1 to logo column. Simple bootstrap math rule based on 12 grid.


Check Layout settings, and made above corrections. Or create your own custom header.

And yes, you can keep suggested by me CSS anyway.

0
MS
Martin Seidl
Accepted Answer
1 month ago #202613

thmx, I know that and I tried it out but then there is too little space for the menu, thnx anyway

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 1 month ago #202479

Hi Martin,

Is this solved now? If yes, you can then close this post by accepting the answer.

0
MS
Martin Seidl
Accepted Answer
1 month ago #202611

No not yet, hi Paul thnx,but your cocde and Mehtaz' make the whole header section (except the language switcher) just more padding on top. The logo is not enlarged.

see https://snipboard.io/TlqDRr.jpg

0
MS
Martin Seidl
Accepted Answer
1 month ago #202615

ah sorry Paul, as always u r wright! Logo became larger, but still the whole header section has more padding top, language switcher module ist not aligned and the current scroll item has larger gap towards menu item.

0
MS
Martin Seidl
Accepted Answer
1 month ago #202617

and one more: after scrolling down the whole menu looks unordered. see https://snipboard.io/nOQT9H.jpg

0
MS
Martin Seidl
Accepted Answer
1 month ago #202618

to fix the whole thingI embedded into custom.css: (Paul, am I right?)

sp-header {height: 120px;}

sp-logo {padding-right: 0; padding-left:0;}

sp-menu .sp-megamenu-parent > li > a {line-height: 120px;}

sp-header .logo{

height: 120px !important; }

sp-top3 {

margin-top: 47px!important;

}

sp-header.menu-fixed {

height: 120px;

}

sp-header.menu-fixed .sp-megamenu-parent > li > a, #sp-header.menu-fixed .oneclip-top-search.sp-module, #sp-header.menu-fixed #offcanvas-toggler {

line-height: 120px;

} .sp-megamenu-parent > li > a::before { bottom: 38px; }

but still for mobile view now some changes are needed.....

0