How do I change my logo on the homepage to the left of the page and place the menu to the right

[JP12we5]

The Theme is Boundless and I am not sure how to change my logo on the homepage to the left of the page and place the menu to the right. Ive tried to find the setting, but to no avail it can't located a fix.

[ali768]

hey dear @JP12we5 can you send me your website URL then i will help you 

[JP12we5]

hello, thank you, my website url is link 

[JP12we5]

hello, all help would be appreciated, yes please take care of this 🙂

[Made4uo-Ribe]

Hi @JP12we5 

The logo is not visible on homepage. Please, add. Thanks!

[JP12we5]

hello, ive just added the logo for you to see

[JP12we5]

please let me know if you can help

[Made4uo-Ribe]

Thanks for the info, try this one.

1. From your Shopify admin dashboard, click on "Online Store" and then "Themes"
2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
3. In the "theme. Liquid" file. Find the </body> tag and paste the code below before the tag. 

{% if template.name == 'index' %}
<style>
@media only screen and (min-width: 700px){
.site-header__inner {
    display: grid;
    grid-template-areas:
        "logo icons nav";
    grid-template-columns: 1fr auto auto;
    width: 100%;
}

.site-header__logo h1 {
    grid-area: logo;
}

.grid__item.one-third.medium-up--one-sixth.text-right {
    grid-area: icons;
    display: flex !important;
}

.grid__item.one-third.medium-up--one-sixth {
    grid-area: nav;
}

.template-index .site-header-wrapper, .one-third {
    width: 100% !important;
}
.site-header__logo img {
    max-width: 100%;
    margin-left: 0;
}
.grid__item.one-third.medium-up--two-thirds {
    width: 100% !important;
}

.doubly-wrapper {
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
    margin-bottom: 10px;
}
}
</style>
{% endif %}

• And Save. 
• Result:
  

 Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better! 

[JP12we5]

Hello I appreciate your response and I did the fix. However, it shows up perfectly on desktop, but not on mobile. Mobile viewing still shows up the same. How can I change that so it shows correctly?

Also the drop down menu when I press the (3 bars for menu) shows up on the left of the screen not the right where the three lines are located. I would like for it to show up on the right where the menu bar is on mobile and desktop.

[JP12we5]

Also the onld view appears for all other pages, id like it for all pages to have the logo on the left and menu on the right, on desktop and mobile. don't worry I will tip I know its a lot of work and I appreciate you in advance

[JP12we5]

hello, I still need your help when you are available because it only shows correctly on desktop and not mobile 

[JP12we5]

hello, this never correctly fixed the issue, I was trying to get in contact with you, but you haven't replied 

[Made4uo-Ribe]

Oh, I only worked on the desktop version and didn’t include the mobile version. It’s better to hire a developer for this, as there’s a lot of alignment work needed.

[JP12we5]

ok thanks for your efforts 

[Dan-From-Ryviu]

Hi @JP12we5 

I see you already did it

[JP12we5]

hello, no I was only able to resolve the issue for the home page on desktop view, not mobile or other pages , I still need help please

[JP12we5]

it shows up perfectly on desktop, but not on mobile. Mobile viewing still shows up the same. How can I change that so it shows correctly?

Also the drop down menu when I press the (3 bars for menu) shows up on the left of the screen not the right where the three lines are located. I would like for it to show up on the right where the menu bar is on mobile and desktop

The old logo in the middle view appears for all other pages. I'd like it for all pages to have the logo on the left and menu on the right, on desktop and mobile.