Search Bar not working overlaps top bar

[Luxurymrkt]

 

Hi,

I have when someone shopping with a stylist a top bar appears. Then my search bar doesn’t show fully https://vazluxe.com?sca_ref=8320467.5ZYTHOrRjSSP

[Laza_Binaery]

Hi @Luxurymrkt 

You have empty space on top and it is from some app "scaaf-message-bar" is in the code

<div class="scaaf-message-bar"><p class="scaaf-message-bar-content" style="visibility: hidden;">Loading</p></div>

bt it does nothing. Maybe some leftovers from an app you do not use or is not configured.  The problem is that app with JavaScript ads padding to your body element so it pushes the header down and over the search.

If you do not use that app search your theme.liquid and search for "scaaf" and remove/comment out code. Alternative, a dirty solution is to add some CSS to your body  like:

body {
    padding-top: 0 !important;
}

[Luxurymrkt]

Hi I want to keep the top bar as it shows who they are shopping with. But have the search bar still work.

[Laza_Binaery]

Right, so then maybe just add the same value, how much body has padding, to this code in theme.css line 13198

So, for a top I have added  + 43 px.  Try it out.

.quick-search{
  --menu-max-width:var(--flyout-width);

  position:fixed;
  top:calc(
    var(--announcement-height, 0) + var(--height-header, 0) - var(--scroll-y, 0) + 43px
  );
  right:0;
  bottom:0;
  left:0;
  display:none;
  width:100%;
  color:var(--color-text);
  z-index:480;
  z-index:var(--z-index-quick-search);
}

[Luxurymrkt]

 

Hi, this works perfect but only if the top bar is always visible. In this case it’s only visible if they shop with a stylist. So when not it looks like this. Is there a way to only show if too bad visible