Move menu item in header

Store Design
, ,

Topic summary

A user wants to reposition menu items in their Shopify store header: keeping 3 items on the left while moving 1 item to the right, with the search icon placed before it.

Initial Solution:

  • CSS code provided to move the menu item to the right using absolute positioning
  • Code targets specific menu item (#HeaderMenu-intrebari-frecvente) and search icon wrapper
  • Uses media query for screens 769px and wider

Follow-up Issue:
The menu item moved successfully, but the search icon and menu item need to swap positions.

Updated Solution:
Revised CSS adjusts the search icon position (right: 230px) to place it before the relocated menu item, achieving the desired layout.

All changes involve adding custom CSS to the theme’s stylesheet (base.css/theme.css/style.css/main.css/custom.css) through the Shopify theme editor.

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

ss.png
ss.png1914×991 39.5 KB

Store url :https://regader.org/
So i only want to move one menu item to the right and put the search option in front of it. So as a finished product: 3 menu items on the left as they are , and 2 items on the right side as shown .

1 Like
2

Hi @alex1213 ,

Please share the website URL.

3

Hello @alex1213
Okay, please send me the store URL so I can check and make the updates for you.

4

Done

5

Done

6

Hi @alex1213 ,

Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css/main.css/custom.css file Add the provided code at the end of the file.

@media (min-width: 769px){
.header__icon .svg-wrapper {
    right: 167px !important;
}

a#HeaderMenu-intrebari-frecvente {
    position: relative !important;
    right: -125vh;
}
}
7

Thank you , this fixed it , but i would still want that search icon to be in front of it. I need them to basically switch places
12.png

8 
@media (min-width: 769px){
.header__icon .svg-wrapper {
        right: 230px !important;
        position: relative !important;
 }
}