Adjusting Top Bar Height in Educon (Helix) Template - Forum | JoomShaper
Staff replied Helix Framework

Adjusting Top Bar Height in Educon (Helix) Template

Asked by PAULA123AMARAL 1 year ago Last activity 1 year ago

Hello!

I need help adjusting the height of the main menu area (the “top bar”) in the Educon template (and this applies to other Helix-based themes as well). By default that bar is about 90 px tall, but I’d like to reduce it to 70 px (or less) to make the header more compact.

My question is:
Which CSS selector is responsible for setting that height (including any padding or margin), and what’s the safest way to override it in the template?

I want to shrink the top bar without breaking the menu’s usability or its responsive behavior.

Thanks in advance!

3 replies

Mehtaz Afsana Borsha Staff

Hi

Thanks for contacting us. Could you please give me your site URL and also a screenshot of your issue?

-Regards.

Paul Frankowski Senior Staff
1 year ago · edited

Hi Paula,

Are you sure that you talk about "top-bar" not a "header"?
Becuase in Header you have Logo and Menu. And Top-bar is a blue section/row above the header. One step up. Please remember a difference for next time, thx.

Try that Custom CSS

#sp-header, #sp-header .logo {height: 70px;}
.sp-megamenu-parent > li > a, .icon-top-wrapper {line-height: 70px;}
.sp-megamenu-parent > li > a::before {bottom: 25px;}

In Template Options > Custom Code > Custom CSS


After using it you should get that
info_2837_2025.jpg

Mehtaz Afsana Borsha Staff

Hi PAULA,

Is this solved now?

PAULA123AMARAL Asked this

Thank you very much!
Everything is fine now

Mehtaz Afsana Borsha Staff

Glad to know that and thanks for accepting the answer.

Log in to reply.