remove spacing

Shopify Discussion
,

Topic summary

A user seeks help removing unwanted spacing on their Dawn theme Shopify store (mansaroverfurnishings.com). Multiple contributors provide CSS solutions to reduce margin below the header section.

Initial Problem Solved:

  • Several users offer similar fixes: adding CSS code to theme.liquid file targeting .section-header or .shopify-section-group-header with margin-bottom: 0 !important for desktop screens (min-width: 750px)

Follow-up Requests:
The original poster then requests additional modifications:

  • Search icon repositioning: Move search icon to opposite side (left) on desktop only
  • Search bar background color: Change to white (#fff) for all pages
  • Solutions provided using absolute positioning and background color overrides

Bug Encountered:

  • Search bar white background initially only worked on homepage
  • Fixed by wrapping code in conditional template check or applying globally

Additional Issues Raised:

  • Image slider with text not working properly (arrows malfunctioning, displaying incorrectly)
  • Unwanted element appearing under featured collection
  • Solution provided to hide .swym-button element with display: none

The thread remains active with ongoing troubleshooting for the slider issue.

Summarized with AI on November 6. AI used: claude-sonnet-4-5-20250929.
13

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

@media screen and (min-width: 990px) { summary.header__icon.header__icon--search { position: absolute !important; left: 5%; top: 20%; } } .search-modal.modal__content.gradient { background: #fff !important; } input#Search-In-Modal, div#predictive-search-option-search-keywords { background: #fff !important; }

Tech_Coding_0-1725973839266.png
Tech_Coding_0-1725973839266.png1365×144 1.72 KB

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

1 Like