Need assistance to modify the Header/Menu on Trade Theme

Store Design
, ,

Topic summary

A user seeks help customizing the header and menu layout in Shopify’s Trade Theme with four specific requests:

Desired Changes:

  • Move logo further left to align with a reference word
  • Align main menu items with specific letter positioning
  • Shift search, account, and cart icons right
  • Increase menu font size and make text bolder

Solution Provided:
A community member offers CSS code to be added before the </head> tag in the theme.liquid file. The solution addresses:

  • Menu item boldness (font-weight: 700)
  • Single-line menu alignment
  • Icon styling adjustments

Current Status:
The initial modifications work successfully. The conversation remains open with a follow-up question about adding a permanent search box beside the search icon in the Trade Theme header. Screenshots are referenced throughout to illustrate the desired layout changes.

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

Hello, good evening!

I just need some assistance regarding on (1) moving the logo on further left, aligned with the “Leading” word, (2) For the main menu items, it starts/aligned with the “G” letter from “Leading” word, (3) The search, account, and cart icons to be moved slightly on the right, to add search box beside the search icon (4) Increase the font size of the menu items, and make it a little bit bolder, probably 700 weight bolder, and all menu items are on straight line or 1 column.

I’ve made a simple illustration for it, please see the attached picture. Hope it helps, thank you!

This is the website - https://dronehub-ph.myshopify.com/

Password - iatsau

Thank you!

Screenshot 2024-08-24 205119.png
Screenshot 2024-08-24 205119.png1371×323 424 KB

1 Like
2
  • Here is the solution for you @Mabinibooks
  • Please follow these steps:

z5686811214059_e66de1953f1db631f9134af5cdb796ad.jpg
z5686811214059_e66de1953f1db631f9134af5cdb796ad.jpg1865×854 94.6 KB

  • Then find the theme.liqid file.
  • Then add the following code at the before tag and press ‘Save’ to save it.
  • Here is the result you will achieve:

BSSTekLabs_0-1724504824057.png
BSSTekLabs_0-1724504824057.png1897×535 162 KB

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
1 Like
3

Can you add more this code to before tag in file theme.liquid to bold icon @Mabinibooks

BSSTekLabs_0-1724508828606.png
BSSTekLabs_0-1724508828606.png224×127 18 KB

1 Like
4

Thanks again, this one worked as well

1 Like
5

Glad to help you. Have a good day.

1 Like
6

You too, just one last thing. How to add in Trade Theme a permanent search box beside the “search icon” like this?

Mabinibooks_0-1724509406440.png

1 Like