Search bar drop down menu to overlay on top of section below.

[rugousa]

Hello Fellow Shopify neighbors, I encountered a problem but I can not seem to find helpful resources.

One problem with my page is that drop down menu for search bar is obscured by a section layer below. I tried many different method such as editing z-values but failed.

 Could you help me ? 

My website is rugousa.com and you will see the search bar at the main page.

[Dan-From-Ryviu · Accepted solution]

Hi @rugousa 

Please add this code to Custom CSS of that slideshow section to solve your issue.

.overflow-hidden {
  overflow: visible;
}

[rugousa]

I have few css files that might be related to the search bar. I have assets/predictive-search.css which has about 200 lines. I added the custom css snippet you provided to me and want to apply to the running website. I am very new to Shopify and its .liquid files so I have no idea where to test the setting. would you help me? 

I will give you the assets/predictive-search.css:

predictive-search[open] .overlay {
  z-index: 30;

}
predictive-search[open] .search__form {
  z-index: 32;
}
predictive-search[open] .search__input {
  background-color: rgba(var(--bg-color));
  box-shadow: inset 0 0 0 1px rgb(var(--text-color));
}
.header predictive-search[open] .search__input {
  background-color: rgba(var(--bg-color));
  box-shadow: inset 0 0 0 1px rgb(var(--text-color));
}

.search__reset {
  right: 12px;
  padding: 10px;
}
[dir=rtl] .search__reset {
  right: auto;
  left: 63px;
}
[dir=rtl] .search__reset::after {
  right: auto;
  left: -8px;
}

.predictive-search {
  --heading-color: var(--text-color);
  display: none;
  top: -12px;
  left: calc(var(--gutter) * -1);
  width: 100vw;
  padding-top: 60px;
  border-radius: 8px;
  background-color: rgba(0,0,0,.75);
}
.header .predictive-search {
  top: 0;
}
predictive-search[open] .predictive-search {
  display: block;
  z-index: 31;
}
.predictive-search .tablist {
  position: -webkit-sticky;
  position: sticky;
  z-index: 1;
  top: 0;
  background: rgba(0,0,0,1)
}
.predictive-search .tablist__scroller {
  margin-inline-start: var(--gutter);
  padding: 8px 0;
}

.predictive-search__tabpanel {
  margin-top: 8px;
}

.predictive-search__item:not(.js-submit):hover, .predictive-search__item[aria-selected=true] {
  background-color: rgba(var(--text-color)/0.04);
}

.predictive-search__view-all {
  padding: 24px var(--gutter) 40px;
  color: currentColor;
  line-height: 1.75;
}
.predictive-search__view-all > .icon {
  width: 16px;
  margin-inline-start: 8px;
  vertical-align: middle;
}

.predictive-search__no-results {
  padding: 16px var(--gutter) 24px;
}

.predictive-result {
  padding: 16px var(--gutter);
  color: var(--text-color);
}

.predictive-result__media {
  flex: 0 0 56px;
  width: 56px;
  margin-inline-end: calc(4 * var(--space-unit));
}
.predictive-result__media img {
  max-height: 100px;
  object-fit: contain;
}

.predictive-result__title:last-child {
  margin-bottom: 0;
}

.predictive-result__sub-title {
  margin-top: 0.4rem;
  color: rgba(var(--text-color)/0.8);
}

.cc-main-search .predictive-result__title {
  font-size: 1em;
  
}
.overflow-hidden {
  overflow: visible;
}
.search--speech .search__reset,
.search--product-types .search__reset {
  right: 56px;
}
.search--speech .search__reset::after,
.search--product-types .search__reset::after {
  content: "";
  position: absolute;
  top: 10px;
  right: -1px;
  width: 1px;
  height: 24px;
  background-color: rgba(var(--text-color)/0.3);
}
[dir=rtl] .search--speech .search__reset,
[dir=rtl] .search--product-types .search__reset {
  right: auto;
}
[dir=rtl] .search--speech .search__reset::after,
[dir=rtl] .search--product-types .search__reset::after {
  right: auto;
  left: -8px;
}

predictive-search .search__input {
  padding-inline-end: 95px;
}

.header__grid--centered-logo .search__input:not(.search__input--dirty) {
  padding-inline-end: 54px;
}

.predictive-search__scroller {
  max-height: 66vh;
  margin-top: 40px;
}

@media (max-width: 768.98px) {
  .header__search .overlay {
    z-index: 900;
    background-color: rgba(0, 0, 0, 0.4);
  }
  .header .predictive-search {
    top: -20px;
  }
  predictive-search .search__input:not(.search__input--dirty) {
    padding-inline-end: 54px;
  }
  predictive-search .tablist {
    top: -1px;
  }
  .predictive-search .predictive-result__title {
    padding-top: 0;
  }
}
@media (min-width: 769px) {
  .predictive-search {
    left: -12px;
    width: calc(100% + 24px);
    padding-top: 63px;
  }
  .predictive-search .tablist__scroller {
    margin-inline-start: var(--gutter-md);
  }
  .header .predictive-search {
    top: -12px;
  }
  .predictive-result,
.predictive-search__view-all,
.predictive-search__no-results {
    padding-right: 36px;
    padding-left: 36px;
  }
  .predictive-search__view-all {
    padding-bottom: calc(8 * var(--space-unit));
  }
}
@media (min-width: 1024px) {
  .predictive-search {
    padding-top: 68px;
  }
}

[Dan-From-Ryviu]

Hi @rugousa 

Please go to your store admin > Sale channels > Online Store > Themes > Customize, select Slideshow, and add code to Custom CSS. Do not add code to that file because it will affect other sections. 

[rugousa]

I added the custom CSS as you told me to but still would not solve the issue.

From what I know, I need to apply

.overflow-hidden {
  overflow: visible;
}

 this to

<div class="predictive-search absolute bg-theme-bg text-theme-text text-start">...</div>

by adding class name to this div. But I am not sure where to perform modifying code.

Because I am not a web design/css/html expert, I might me wrong but correct me if I am.