Drop down menu items showing behind images from another row.

Please Log in or Create an account to join the conversation.

#
Hi

I have set article good search module in a row under sp page builder. In the next row I have four blocks with images. In the article good search I have one filter and category search. When I select the filter or category the drop down menu items show behind the images from the row below and are not accessable. As far as I read its an issue with z-index but I am not sure how to resolve it. I appreciate any help on the issue.

Thanks
Alex
Attachments:

Please Log in or Create an account to join the conversation.

#
Hello, Aleksandar.

Please, can you send me a link for check it?

Also, you can try to apply the following style, you can place it in your site template's stylesheet:
div.dropdown-menu.open { z-index: 100000; }

Please Log in or Create an account to join the conversation.

#
Hi

I did send you credentials in private message did you had any chance to look at it .?

Thanks
Alex

Please Log in or Create an account to join the conversation.

#
Hello, Alex.

Sorry, I can't find your site url. Please, send me an email - This email address is being protected from spambots. You need JavaScript enabled to view it.

Please Log in or Create an account to join the conversation.

#
Hello, Alex.

It is related with your site template's layout. You need to apply extra style for section where the module placed. Please, try the following:
#sp-page-builder .page-content .sppb-section:first-child {
    z-index: 2;
}

Please Log in or Create an account to join the conversation.

#
Hi Molotow

Thank you for your help. I did try putting the css but it did not make any difference. Just to see what will happen I moved the module one row below the 4 photos. Now when I go with the scroll down the search menu pops up and it is above images but hwen I scroll up and when the menu drops down its again behind the row below . Any thoughts? Under homepage 3 is the setting in the sp builder.

Thanks again
Alex
Attachments:

Please Log in or Create an account to join the conversation.

#
Hello

I guess its fixed now :). Maybe I did it wrong but I created a custom.css and I add

.sp-page-builder .page-content #section-id-1573767037625 {
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
z-index: 2;
}

This was taken from inspect for the section.

Thank you very much for all your help. Just if you can also tell me why the fields are not align ?

Thanks
Alex

Please Log in or Create an account to join the conversation.

#
Hello, Alex.

1) Ok, great that you fixed it.

2) It is because you have extra style in your theme which affects it.

Please, try to apply the following styles:
.GSearchBlock .tags { padding: 0px !important; }
.GSearchBlock .btn.dropdown-toggle { overflow: hidden; }
.GSearchBlock .btn { margin: 0px !important; }
.GSearchBlock .inputbox:not(.bootstrap-select):not(.form-check-input) { min-height: 33px; }