Adjusting Top Bar Height In Educon (Helix) Template
PAULA123AMARAL
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!
Mehtaz Afsana Borsha
Accepted AnswerHi
Thanks for contacting us. Could you please give me your site URL and also a screenshot of your issue?
-Regards.
Paul Frankowski
Accepted AnswerHi 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
