Change content position on the header

Store Design
,

Topic summary

A user seeks to restructure their Shopify header layout, moving the logo and navigation menus to the far left while positioning login, cart, language selector, and search icons to the far right.

Initial Solution:

  • Multiple contributors provided CSS code to be added to base.css or theme.liquid
  • The primary fix involved using display: grid on the header element
  • This successfully achieved the desired left-right layout split

Follow-up Request:
After implementing the layout change, the user requested:

  • Increased font size for menu items (HOME, SHOP ALL, etc.)
  • More spacing between menu items

Current Status:

  • Spacing between menu items was resolved using gap: 2rem on .list-menu--inline
  • The issue remains partially unresolved - menu item font size has not yet been increased
  • The discussion is ongoing, awaiting a solution for enlarging the menu text
Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
7

Hello @Mohd01 ,

Here are the steps to apply the necessary changes in your Shopify store:

  1. In your Shopify Admin, navigate to Online Store > Themes > Actions > Edit Code.
  2. Locate Asset > base.css and paste the following code at the bottom of the file:
.list-menu--inline {
  gap: 2rem !important;
}

ZestardTech_0-1737634255876.png
ZestardTech_0-1737634255876.png1887×382 177 KB

Let me know if you need further assistance!