I want to align the header logo on the left on mobile and the hamburger menu on the right.

[Havana2024]

hello,

I want to align the header logo to the left and the hamburger menu to the right on mobile.

(Theme is Broadcast)

I was able to align it to the left using CSS that I researched on my own, but I couldn't adjust the menu position and the menu cursor and logo overlapped.

Ideally, it should look like the image below.
(I previously used the same theme when creating another site, and this is a capture from when I received support)

I was also told by the theme provider that this is not possible.

Please help me.

[Made4uo-Ribe]

Hi @Havana2024 

Would you mind to share your Store URL website? with password if its unpublish. Thanks!

[Havana2024]

Thank you for your comment.

19964f-7b.myshopify.com

password : aolyia

Thank you for your support!

[Made4uo-Ribe]

Thanks for the info, Can you please, take it out or replace the code that you add before. 

On this one. 

<style>
@media only screen and (max-width: 511px) {
   .header__mobile__button .navlink {
        width: 100% ;
    }
    .header__logo.header__logo--image {
        justify-content: flex-start;
    }
    .header__mobile__left {
    grid-area: 1/4;
    }
}

</style>

 And save. 

Result:

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[Havana2024]

Thank you for your support.

Your capture is just perfect.

Where is the correct place to insert it?
Are you sure it's the section's CSS?

When I put it in, the default logo was in the center and the hamburger menu was on the left.

[Made4uo-Ribe]

You added some code for margin-left and margin-right that is being overridden. I'd like you to remove that because it’s causing the header to be misaligned. Before you add the code I provide. 

If you like to add on the custom.css. Remove the style tag. 

@media only screen and (max-width: 511px) {
   .header__mobile__button .navlink {
        width: 100% ;
    }
    .header__logo.header__logo--image {
        justify-content: flex-start;
    }
    .header__mobile__left {
    grid-area: 1/4;
    }
}

And save.

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[gutenplayer]

@Havana2024 

Hi, Please go to

1, from admin, go to Online Store > Themes.

2, Actions > Edit code for your active theme.

3, Find and open the theme.liquid file, maybe in the Layout folder.

4, Look for the </head> tag and paste the Google Fonts embed code

.js__show__mobile .header__mobile {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
}
@media only screen and (max-width: 749px) {
    #shopify-section-sections--23331948232995__header .header__logo.header__logo--image {
        width: 100%;!i;!;
        margin-left: 0 !important;!i;!;
    }
    
#shopify-section-sections--23331948232995__header .header__mobile__button .navlink {
    width: auto !important;
    margin-right: 0  !important;
}
}

.header__mobile__right {
    display: none;
}

.header__mobile__left {
    width: 100%;
}

.header__mobile__button {
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

.header__logo.header__logo--image.header__logo--has-transparent {
    justify-content: flex-start;
}​

result

I hope it works for you, let me know, and If you'd like to discuss this more, don't hesitate to send me a PM

Thank you

[Havana2024]

Thank you for your support.

Your capture is just perfect.

However, I tried the method you taught me, but it ended up looking like the screenshot below.　The code is visible above.

I found </head>, but where is the correct place to insert it?

[gutenplayer]

@Havana2024  here is update code

<style>
.js__show__mobile .header__mobile {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
}
@media only screen and (max-width: 749px) {
    #shopify-section-sections--23331948232995__header .header__logo.header__logo--image {
        width: 100%;!i;!;
        margin-left: 0 !important;!i;!;
    }
    
#shopify-section-sections--23331948232995__header .header__mobile__button .navlink {
    width: auto !important;
    margin-right: 0  !important;
}
}

.header__mobile__right {
    display: none;
}

.header__mobile__left {
    width: 100%;
}

.header__mobile__button {
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

.header__logo.header__logo--image.header__logo--has-transparent {
    justify-content: flex-start;
}​
</style>

[gutenplayer]

@Havana2024  

if still problem, don't hesitate to send me a PM 
thank you

[Havana2024]

Solved!
Thank you very much.