Header Height Option Not Working - Forum | JoomShaper
Solved Helix Framework

Header Height Option Not Working

Asked by Fernando Bautista 8 months ago Last activity 7 months ago

Hello, my website is https://portalnews.co

I'm trying to reduce the menu height using the template option: Basic - Header - Header Height (set to 40px).

However, no matter what value I enter, the height doesn't change; nothing happens.

I'd like to know if I'm mistaken in confusing the header with the menu, or where I can reduce the menu height. I feel like the menu height is too high on a desktop, and I can't figure out how to reduce it.

I've attached a screenshot. Please help me, and also, how do I change the menu background color from white to any color?

https://drive.google.com/file/d/1F11oupgccQY4u-nNakPjxV_UXKU2XHN9/view?usp=sharing

Thank you.

Accepted answer

Marked as the solution
Mehtaz Afsana Borsha Staff
8 months ago

Hi

Header 40px is too small, whatever if you want it like this way, then you have to change menu and also logo. You can try this CSS in your custom.css file

div#sp-menu {
    position: relative !important;
    bottom: 20px;
}

div#sp-logo {
    position: relative;
    bottom: 20px;
}

#sp-header {
    background: #a32f2f !important;
     height: 40px !important;
}
Mehtaz Afsana Borsha Staff
8 months ago

Glad to know that your issue is fixed and thanks for accepting the answer.

7 more replies

Oldest first Newest first Most helpful
Mehtaz Afsana Borsha Staff
8 months ago

Hi

Thanks for contacting us. You can use this CSS in your custom.css file

#sp-header {
    background: #acdbe4 !important;
    height: 75px !important;
}

-Regards.

Fernando Bautista Asked this
8 months ago

Hello and thank you for your response.

The code certainly worked; the color and height changed. However, the menu items don't rise to match the height and remain in the same position, resulting in an uneven color and menu item size (I've attached a screenshot with a height of 40px).

https://drive.google.com/file/d/19NEqFoCHAigGI4YAoZuXxnZ1orLDaVXI/view?usp=sharing

The goal is for the menu items to also adjust to the height within their designated space and not look like the screenshot.

Thank you for your kind assistance.

Fernando Bautista Asked this
8 months ago

Hi Mehtaz, and thank you so much for your response.

The code worked perfectly; you can see it live.

Just one last question: if I wanted to add another line below the menu items with a module like an SP Page Builder with a news slider or scroller add-on, what would I need to do? This is only for viewing on a PC.

https://www.joomshaper.com/documentation/sp-page-builder/articles-scroller

In any case, the code fits my current needs. Thank you so much.

Mehtaz Afsana Borsha Staff
8 months ago

You are always welcome. In that case, you have to use this CSS

#sp-header {
    border: 2px solid red !important;
}

We’d also really appreciate it if you could share a short review of your experience with our product and support. Your feedback helps us improve and is valuable to the community. Thank you for your time and support.

Joomla Extension Directory

TrustPilot

Mehtaz Afsana Borsha Staff
7 months ago

Hi,

This is not happend of my CSS codes. These two are different. You have already set the line height on it, that's why this space happened. To reduce it, you have to use this CSS in your custom.css file

.sp-megamenu-parent>li>a, .sp-megamenu-parent>li>span{
line-height: 0px !important;
}
Fernando Bautista Asked this
7 months ago

Hi, the code worked perfectly, thank you very much.

Mehtaz Afsana Borsha Staff
7 months ago

Glad to know that and you are always welcome.

Log in to reply.