Move the SHOP button in the homepage header from the right side of the screen to the left side

Store Design
1

Move the “SHOP” button in the homepage header from the right side of the screen to the left side. (only want “shop” to be on left, all other buttons need to stay on the right.) Also need to move the logo to the center (on desktop only as it is already in center on laptop.) Brooklyn Theme.

Thanks!

2

Hi. Can you please share your store url?

3

https://notyethome.co/

4

Hi @notyethome

To customize the Shop button, please follow these steps:

  1. Open Edit code at Online store > Themes > Edit code:
![view (34).png|1649x835](upload://r0XmEQUUwhjEtnagslhJdkXa0Rz.png)
  1. Find the file “theme.scss.css” and paste the following code at the end of the file:
@media only screen and (min-width: 998px) {
    .site-nav .site-nav__item:first-child {
        position: absolute;
        left: 45px;
    }

    .wrapper .large--one-third {
       position: relative;
       left: 50%;
       transform: translateX(-50%);
    }

    .wrapper .large--one-third .site-header__logo {
       float: none !important;
    }
}
  • Here is the result:

view (35).png
view (35).png1909×945 663 KB

I hope that this can help you.

5

Hi, this worked for the homepage, however it made everything on the product page shift to the right. Please let me know what how to fix that.

Also, with the “SHOP” button on the homepage, can you make sure that it is the same distance from the edge of the screen as “BAG” is on the right side?

Thank you

6

Please not that I am in Brooklyn theme.

7

Hi @notyethome

We tried it on your homepage and found the result is fine. Everything is not pushed to the right as you mentioned.

view (11).png
view (11).png1915×943 124 KB

If possible, please share with us a screenshot so we can easily check it for you. In addition, in order for the code to work in the surest way, you can edit a bit of the code as follows (there is a fix for the distance of the Shop button):

@media only screen and (min-width: 998px) {
    .site-nav .site-nav__item:first-child {
        position: absolute !important;
        left: 62px !important;
    }

    .wrapper .large--one-third {
       position: relative !important;
       left: 50% !important;
       transform: translateX(-50%) !important;
    }

    .wrapper .large--one-third .site-header__logo {
       float: none !important;
    }
}

I hope that this can help you.