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
Topic summary
A Shopify store has a search bar positioning issue when a conditional top bar appears for customers shopping with a stylist. The search bar gets pushed down and overlaps with the header, making it partially hidden.
Root Cause:
- An app (“scaaf-message-bar”) adds padding to the body element via JavaScript when the stylist bar is active
- This padding pushes the header down, causing the search overlay to misalign
Proposed Solutions:
- Initial suggestion: Remove the app code or force body padding to 0 with CSS
- Adjusted fix: Add +43px to the
.quick-searchpositioning in theme.css (line 13198)
Current Problem:
The CSS adjustment works when the top bar is visible, but creates excessive spacing when the bar is hidden (non-stylist shoppers). The user needs a conditional solution that only applies the extra spacing when the stylist bar is actually present.
Status: Unresolved - requires a dynamic CSS solution that detects whether the top bar is active.
Hi @Luxurymrkt
You have empty space on top and it is from some app “scaaf-message-bar” is in the code
Loading
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;
}
Hi I want to keep the top bar as it shows who they are shopping with. But have the search bar still work.
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);
}
