Repositioning the Desktop Logo slightly to the right of where it is now

[twerg]

I've been reworking my page layout and I'm not quite happy with the logo position in the header. I do want it on the left side but I'd like to move it about 1/4 inch or so to the right (desktop) so it's not up against the left side of the page. While I'm at it, I'd like to move the social icons and the menu at the top (next to social icons) slightly to the right but that might need to be a topic for another thread? I've searched high and low for an answer and can't find it. Can someone please help? Also, please let me know if I picked the wrong topic location...

I use Turbo theme at https://slingerstraps.com

 

[swym]

Hey @twerg, 

It's good practice to create a copy of your theme and work on that to preview the changes before applying, especially if you are editing the raw code. Alternatively, you can also use the Shopify theme editor’s versions to revert to previous versions, but it is not recommended if you are making multiple changes.

To address your query about shifting the desktop logo and social icons on the header to the right-hand side, kindly follow the steps outlined below:

1. Open the code editor, as shown in the screenshot below.

2. Create a snippet called ‘custom-header-styles’ and add the below code:

  <style>
    /* NOTE YOU CAN ADJUST THESE NUMBERS AS PER YOUR STORE REQUIREMENT */
     @media only screen and (min-width: 990px){

       /* FOR SOCIAL MEDIA ICONS AND MENU ITEMS */ 
       header .social_icons {
          padding-left: 2rem;
       }

       /* FOR LOGO IMAGE */ 
       header .header__logo.logo--image {
          padding-left: 2rem;
       }
    }
  </style>

3. Include the ‘custom-header-styles.liquid’ file in your “theme.liquid” file.
Add the following include code to your theme.liquid file.

{% render 'custom-header-styles' %}

It would look something like below:

4. Done? Now save the file, and try previewing to confirm if the changes work for you.  In the reference above, it looks something like below:

I hope this helps!

Regards,
Abhishek from Swym 

[twerg · Accepted solution]

Hi Abhishek- Thank you for your response. I was able to get the logo moved to the right a few pixels although it did shrink it just a bit. Not a problem. Regarding the menu, the code appeared to make the letters larger but didn't seem to move them further to the right from the edge of the page like your example showed. As such, I removed that part of the code and just left the logo code. I'm happy with the result and appreciate your time. 

[swym]

Hello @twerg, 

I'm pleased to hear that you could make adjustments to your Shopify store! If my response aided you, please consider giving it a like (👍) and marking it as the accepted solution if it resolved your issue. Your feedback helps other community members with similar questions. Thank you!

Regards,
Abhishek from Swym 

[twerg]

You got it! Thank you for your coding help as well as helping me understand how to wrap up the conversation. Appreciate it!