How can I move my website logo to the left side?

Store Design
, , , ,

Topic summary

A user working with the Gallery theme on Shopify wants to reposition their website logo from center to left while keeping it aligned with the navigation menu.

Current Issue:

  • Logo is centered on the page
  • User has existing CSS code that adjusts menu spacing but doesn’t achieve desired logo placement

Proposed Solution:
A support representative from BSS-Commerce provided:

  • Visual mockup showing the expected result with logo on the left
  • Step-by-step instructions to edit the theme code
  • Custom CSS snippet to be added to the “main-navigation.css” file
  • Code targets desktop view only (min-width: 992px) and adjusts logo positioning to absolute with specific left/top values

Status: Solution provided but not yet confirmed as implemented or working. The CSS code includes positioning adjustments for the logo, menu items, and navigation container to achieve left alignment.

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

URL. WWW.PEAKSPORT.MX

THEME . GALLERY

hello I have this code but I want to change the place where the logo is located
right now it’s right in the middle
and I want it to be on the left side
and that it remains at the same height as the menu

@media(min-width: 1440px){
body .#main-nav-wrapper .#main-nav-link.@root {
width: 150px;
white-space: nowrap;
}
.#main-nav-menu > li:nth-child(3){
margin-right: 80px;
}
.#main-nav-menu > li:nth-child(4){
margin-left: 80px;
}
}
@media only screen and (max-width: 1439px) and (min-width: 992px) {

body .#main-nav-wrapper .#main-nav-link.@root {
padding: 1rem;
font-size: 0.9rem;
width: 115px;
white-space: nowrap;
}
.#main-nav-menu > li:nth-child(3){
margin-right: 40px;
}
.#main-nav-menu > li:nth-child(4){
margin-left: 40px;
}
}
@media(min-width: 992px){
body #MainHeader. @sticky .#main-nav-menu > li:nth-child(3){
margin-right: 0;
}
body #MainHeader. @sticky .#main-nav-menu > li:nth-child(4){
margin-left: 0;
}
body .#main-header-inner{
padding-bottom: 30px;
}
body .#main-nav-container {
margin-top: -77px;
}
}

Thanks!!!

2

Hi @ATTIVO

Is this the result you expect?

view (12).png
view (12).png1318×1044 210 KB

To save it on your website, follow these steps:

  1. Go to Online store => Themes => Edit code:
![view (13).png|1919x917](upload://jq4Txn4aEZlBJVAjoY2BAmpZ837.png)
  1. Then find the file: “main-navigation.css” and paste the following CSS code in and save it:
/* FOR DESKTOP */
@media screen and (min-width: 992px) {
    .\#main-header-inner {
        position: relative;
    }

    .\#main-header-logo.\@img.strip-link.flex-center {
        position: absolute;
        top: 0;
        left: 10rem;
        bottom: 0;
    }

    .\#main-nav-container {
        margin-top: 0 !important;
    }

    .\#main-nav-item.\@root {
        margin-right: 0px !important;
    }

    .\#main-nav-item.\@root.\@dropdown {
        margin-left: 0px !important;
    }
}

We’ve adjusted them to work only on the desktop to work for you. Let us know if you need further help.