Does anyone have a code to move the text in header to to the left and the icons to the right, but still have the logo centered
Topic summary
A user seeks CSS code to restructure their store header layout: moving text elements to the left, icons to the right, while keeping the logo centered.
Solution Provided:
- Add custom CSS to the
base.cssfile - The code uses flexbox (
display: flexandjustify-content: space-around) on the header element - Targets the specific header class:
header--middle-center
Implementation:
- Navigate to Edit code in the theme editor
- Locate the base.css file
- Paste the provided CSS snippet at the end of the file
A screenshot demonstrates the expected result showing the redistributed header elements. The discussion appears resolved with a working solution.
1 Like
Hi @MLBildeler can you share store url and password?
Hi @MLBildeler
You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file base.css and add this code at the end of the file
header.header.header--middle-center.header--mobile-center.page-width.header--has-menu.header--has-account {
display: flex !important;
justify-content: space-around !important;
}
Result
Best,
Daisy