How can I shift my menu bar to the right?

Store Design

Topic summary

A user seeks to reposition their website’s menu bar to the right side. They shared their site URL and noted their theme lacks a theme.scss file.

Proposed Solutions:

  • PageFly-Victor suggested adding CSS code to the base.css file targeting #SiteNav nav with absolute positioning (right: 96px, top: 30px) for screens wider than 750px.

  • GemPages recommended inserting code into theme.liquid before the </body> tag.

  • PageFly-Victor provided an alternative CSS snippet targeting .header--has-menu and .header-reward elements using flexbox properties (display: flex, justify-content: space-around) and order adjustments.

The initial solution did not work for the user. The discussion remains ongoing with multiple CSS approaches offered but no confirmed resolution yet.

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

site: https://atlkickswarehouse.myshopify.com/

pw:josh

IMG_7266.jpg
IMG_7266.jpg1170×2532 111 KB

1 Like
2

there is no theme.scss file in my asset folder

3

Hi @atlkicks ,

I’m Victor Nguyen from PageFly.

You can go to Online store => themes => actions => edit code and add this code on file base.css

@media only screen and (min-width: 750px){

   nav #SiteNav {

    position: absolute;

    right: 96px;

    top: 30px;

   }

}

Hope this answer helps.

Best regards,

Victor | PageFly

4

Hello Victor, unfortunately this solution did not work for me.

5

Hello @atlkicks

You can follow these steps:

  1. Go to Online Store->Theme->Edit code
  2. Open your theme.liquid file, paste the below code before

GemPages_0-1669191329330.png
GemPages_0-1669191329330.png1381×848 39.6 KB

I hope the above is useful to you.

Kind & Best regards,
GemPages Support Team

6

Hi @atlkicks ,

You can try this code

@media only screen and (min-width: 750px){

   header.header.header--top-left.header--mobile-left.page-width.header--has-menu{
      display: flex !important;

        justify-content: space-around !important;
}
header-drawer{
order: 4 !important;
}
}