Debut Theme Search Bar Hidden

Highlighted
New Member
3 0 0

Hi, so I am working on a site and have hit a roadblock.


I am creating this part of the website in Shopify with the debut theme and have added some custom coding (linked below). For some reason the search bar is high up and hidden behind the header and so is the announcement when an item is added to the cart, see photos of this below.

 

I added some custom coding to make the header sticky on scrolling and semi-transparent which I think is what’s causing this. I have tried all sorts of coding to fix it. Here is the site, but it is private so let me know if you can help for the password, https://shop.wildatlanticgourmet.com/pages/retail

 

Theme.scss.liquid

Make header fixed – middle of code

 

.site-header {

  height: 80px;

  position: fixed;

  z-index: 99999;

  top: 0;

  left: 0;

  margin-top: 0;

  width: 100%;

 

  @include media-query($small) {

    border-bottom: 1px solid $color-border;

  }

  @include media-query($medium-up) {

    padding: 0 $gutter-site;

    &.logo--center {

      padding-top: $grid-gutter;

    }

  }

}

 

End of scss coding:

 

/* Change header color */

header.site-header.border-bottom.logo--left{

  background-color: #BBD9BE;

}

.site-header__mobile-nav {

  background-color: #BBD9BE !important;

}

/* make the header semi-transparent */

.site-header {

            opacity: 0.9 !important;

}

.site-header .site-header__mobile-nav.grid--table {

display: Right;

}

.template-product{

div#shopify-section-header{

position: static;

}

}

.site-nav--has-dropdown:hover .site-nav__dropdown,

.site-nav--has-dropdown:focus .site-nav__dropdown {

 display: block;

}

.site-nav__dropdown { top: 30px; }

.site-nav__dropdown {

             background-color: #BBD9BE;

             opacity: 0.9 !important;

     border: transparent;

}

.site-nav {

 text-align: right;

 Margin-right: 0px;

}

#AccessibleNav{

width:100%;

}

#shopify-section-header .nav-bar {

    z-index: 0;

    position: relative;

}

 

Screen Shot 2020-06-25 at 1.00.42 PM.pngScreen Shot 2020-06-25 at 1.10.16 PM.pngScreen Shot 2020-06-25 at 12.59.58 PM.png

0 Likes