Header Height Option Not Working
Fernando Bautista
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.
Mehtaz Afsana Borsha
Accepted AnswerHi
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
Accepted AnswerHi
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
Accepted AnswerHello 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
Accepted AnswerHi 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
Accepted AnswerYou 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.
Fernando Bautista
Accepted AnswerHi, something unexpected happened. Although the code worked fine, now when I hover the mouse over the menu item (the "People" separator), there's a blank space underneath. This is noticeable when browsing from a desktop computer and it looks unsightly.
Video attached.
https://drive.google.com/file/d/1yhrbwecTa779zrz8GI4XMMiRm3710b_b/view?usp=drive_link
Could you please help me? Thanks.
Mehtaz Afsana Borsha
Accepted AnswerHi,
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;
}