my navigation & search icon is overlapping, please fix it
URL: https://vibescandle.myshopify.com/?_ab=0&_fd=0&_sc=1
PASS: 1
Topic summary
A Shopify store owner reports overlapping navigation menu items and search icon in their header. An attached screenshot shows the “Creator Collaborate” menu item colliding with the search icon.
Proposed Solutions:
-
First approach: Add CSS margins/padding to create spacing between the last menu item and icons. Suggested code targets
.header__menu-item:last-child,.header__icon--search, or.header__iconswith flexbox gap properties. -
Second approach (after first failed): Modify the
.page-widthclass by addingpadding: 10px 25px !importantto the theme.css file.
Both solutions involve editing the theme code through the Shopify admin panel (Online Store > Themes > Edit code). The issue remains unresolved as the original poster confirmed the first solution did not work, and no follow-up was provided on whether the second approach succeeded.
1 Like
**Step-by-Step Fix (via theme code editor)**1. Go to Online Store > Themes > Customize.
-
Click “…” > Edit code.
-
Find and open the file that handles the header (likely under Sections/header.liquid or Snippets/header.liquid).
-
Look for the navigation menu and icons, especially the search icon (
-
Add some margin or padding to the right of the “Creator Collaborate” menu item or to the search icon.
Example CSS Fix
Add this to the bottom of your theme.css or base.css (you can find it under Assets/):
css
.header__menu-item:last-child { margin-right: 2rem; /* Adjust spacing between last menu item and icons / } .header__icon–search { margin-left: 1rem; / Creates spacing from menu */ }
If your icons are wrapped inside a container (like .header__icons), you can also use:
css
.header__icons { display: flex; gap: 1rem; /* Adjust spacing between all icons */ }
Or Simply do the following, check image.
1 Like
Not working
Hi @Emiway1
You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file theme.css and add this code at the end of the file
.page-width {
padding: 10px 25px !important
}
Result:
Best,
DaisyVo