Moving things in header to different places - Focal theme

[galleriste]

I would like to move the logo to the left side and move the header hamburger to the right and adjust the tote bag icon slightly to the left to make room for the hamburger. Below are images of the change I'd like to make.

The website is https://568839.myshopify.com/

[S18]

@galleriste Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->
under the <style> tag before the body ----->
if this code work please do not forget to like and mark it solution

@media screen and (max-width: 767px) {
a.header__logo-link {
    padding-right: 180px;
 }
}

[S18]

@galleriste Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->
under the <style> tag before the body ----->
if this code work please do not forget to like and mark it solution

@media screen and (max-width: 767px) {
a.header__logo-link {
    padding-right: 180px;
 }
}

[S18]

@galleriste Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->
under the <style> tag before the body ----->
if this code work please do not forget to like and mark it solution

@media screen and (max-width: 767px) {
a.header__logo-link {

    padding-right: 180px !important;
 }
}

[S18]

@media screen and (max-width: 767px) {
a.header__logo-link {
    padding-right: 180px !important;
 }
}

hey @galleriste dear follow these steps

Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->
under the <style> tag before the body ----->
if this code work please do not forget to like and mark it solution

[webcraftio]

It is a reference example every theme layout is different so make sure to understand it and if the option is show in theme customizer that would great for you 

you'll need to adjust the theme's code, specifically the header section in the theme.liquid or header.liquid file, and potentially some CSS in the theme's stylesheet.

Access Theme Code:

Go to your Shopify admin panel.
Navigate to Online Store > Themes.
Click Actions > Edit code for your active theme.
Locate the Header Code:

Look for header.liquid or a similar file in the Sections folder. If your theme doesn't have this file, check theme.liquid in the Layout folder.
Edit the Header Layout:

Locate the code for the logo, hamburger menu, and tote bag icon.
Typically, the logo is wrapped in a <div> or <a> tag, the hamburger menu in a <button> or <div> with a class like menu-icon, and the tote bag icon in a <div> or <a>.

Example structure before changes:

<div class="header">
<div class="hamburger-menu"></div>
<div class="logo"></div>
<div class="tote-bag"></div>
</div>

Adjust the structure to

<div class="header">
<div class="logo"></div>
<div class="tote-bag"></div>
<div class="hamburger-menu"></div>
</div>

Open the theme.css or style.css file in the Assets folder.
Add or modify CSS rules to position the elements.

.header {
display: flex;
align-items: center;
justify-content: space-between;
}

.logo {
order: 1; /* Moves the logo to the left */
}

.tote-bag {
order: 2; /* Positions tote bag in the center */
margin-right: 20px; /* Adjust spacing */
}

.hamburger-menu {
order: 3; /* Moves the hamburger menu to the right */
}

[dmwwebartisan]

@galleriste 

This is possible but there are some code changes. Please hire a Shopify expert or contact Shopify support.

Thanks!

[S18]

@media screen and (max-width: 767px) {
a.header__logo-link {
    padding-right: 180px;
 }
}

follow these step

@galleriste Go to Online Store-----Edit Code------Find theme.liquid file-----Add the following code in the bottom of the file above </body> tag

don't forget to like and mark it solution