Height Menu bar blocks clicks in component area - Forum | JoomShaper
Solved Helix Framework

Height Menu bar blocks clicks in component area

Asked by Rakesh 3 years ago Last activity 3 years ago

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

Accepted answer

Marked as the solution
Pavel
3 years ago · edited

Hi.

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;
    }
}

4 more replies

Oldest first Newest first Most helpful
Rakesh Asked this
3 years ago

Yes 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 Asked this
3 years ago · edited

To 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

Rakesh Asked this
3 years ago

Great, thank you!

Log in to reply.