Height Menu Bar Blocks Clicks In Component Area
Rakesh
Using latest Helix Ultimate 2 and Joomla 4.x
I have a custom menu: id= sp-header and class=menubar [sp-logo + sp-menu] height:180px
When scolling down the menubar becomes significantly less in height: #sp-header.header-sticky height:90px
Problem is that the big height menu is blocking any clicks in its area. With many things on the site it creates problems for users, not understanding why their clicks are not working.
Is there a way to hide the 180px hidden menu so that it doesn't block mouse clicks anymore below the sticky header of 90px
Pavel
Accepted AnswerHi.
Not enough, just change Header height. Additionally, you need to change the line-height of the menu items and the height of the logo wrapper. And may be the height of logo image also should be changed.
#sp-header.header-sticky .logo {
height: 90px;
}
/* Optional*/
#sp-header.header-sticky .logo-image {
height: YOUR_VALUE !important;
}
/*--*/
#sp-header.header-sticky .sp-megamenu-parent > li > a,
#sp-header.header-sticky .sp-megamenu-parent > li > span {
line-height: 90px;
}And also, I do not think that you need it for mobile, so the full code will look like this
@media (min-width: 992px) {
#sp-header.header-sticky {
height: 90px
}
#sp-header.header-sticky .logo {
height: 90px;
}
/* Optional*/
#sp-header.header-sticky .logo-image {
height: YOUR_VALUE !important;
}
/*--*/
#sp-header.header-sticky .sp-megamenu-parent > li > a,
#sp-header.header-sticky .sp-megamenu-parent > li > span {
line-height: 90px;
}
}
Mehtaz Afsana Borsha
Accepted AnswerHi
Thanks for contacting us. Do you want to reduce this height?
-Regards.
Rakesh
Accepted AnswerYes when it is in the hidden state when the Sticky menu is loaded.
I changed the setting back, so you can see the problem. But do not want to have it like this for to long since it creates many problems for users at the moment.
Users can not click this yellow button when it is within the 180px range of the menubar.
This is a very serious problem for me.
Rakesh
Accepted AnswerTo be clear, the sp-header needs to become hidden when the sticky menu (90px) is loaded. Otherwise people can not make clicks below the menubar.
Menu 1 is 180px Menu 2 sticky is 90px
Menu 1 needs to become 90px or hidden when menu 2 is active. Menu 1 is now blocking clicks below menu 2.
It is a bit complex, please ask Paul Frankowski