Logo position

[FashionDose]

Hi, I'm using Turbo theme and I want part of the logo to come out of the menu bar. I mean half of the logo to be in the menu bar and the other half to cover part of the slideshow sector.

I want it to turn out like the picture.

Thank you!

[Made4uo-Ribe · Accepted solution]

Hi @FashionDose 

Check this one. 

From your Shopify admin dashboard, click on "Online Store" and then "Themes"

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "theme. Liquid" file. Find the </body> tag and paste the code below before the tag. 

{% if template.name == 'index' %}
<style>
div#homepage_slider-template--15784808513775__16468369609130cea6 {
    top: -70px;
}
.header__logo.logo--image {
    overflow: visible;
    z-index: 100;
}
</style>
{% endif %}

And Save. 

Result:

Note: This only visible on the homepage. Not in all other page. 

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

[BSS-TekLabs]

Hello @FashionDose 
Our team is ready to help you.
Please share your website URL so that we can check and assist you.

[FashionDose]

www.calientefashion.eu

[BSS-TekLabs]

- Here is the solution for you @FashionDose 
- Please follow these steps:

 

- Then find the theme.liquid file.
- Then add the following code at the before tag </head> and press 'Save' to save it.

<style>
@media only screen and (max-width: 600px) {
#shopify-section-header img.primary_logo.ls-is-cached.lazyloaded {
    width: 205px !important;
    position: absolute !important;
    top: -47px !important;
    z-index: 9 !important;
}
}
</style>

- Here is the result you will achieve:

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

[DaveedValencia]

Can you share a link to your store?

[Made4uo-Ribe · Accepted solution]

Hi @FashionDose 

Check this one. 

From your Shopify admin dashboard, click on "Online Store" and then "Themes"

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "theme. Liquid" file. Find the </body> tag and paste the code below before the tag. 

{% if template.name == 'index' %}
<style>
div#homepage_slider-template--15784808513775__16468369609130cea6 {
    top: -70px;
}
.header__logo.logo--image {
    overflow: visible;
    z-index: 100;
}
</style>
{% endif %}

And Save. 

Result:

Note: This only visible on the homepage. Not in all other page. 

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

[FashionDose]

Thank you!

[FashionDose]

Just one more question 😀 - How do I do the same on the mobile version?

[Made4uo-Ribe · Accepted solution]

Check this one for th mobile. 

Please, Insert this one before this code. 

The Outcome is like this or replace with this. 

{% if template.name == 'index' %}
<style>
div#homepage_slider-template--15784808513775__16468369609130cea6 {
    top: -70px;
}
.header__logo.logo--image {
    overflow: visible;
    z-index: 100;
}
@media only screen and (max-width: 798px) {
#header a.mobile_logo img {
        max-height: 120px;
    }
#header .top-bar a.mobile_logo {
    margin-top: 40px;
}
#header .top-bar {
    padding: 20px 0;
}
}
</style>
{% endif %}

And Save. 

Result:

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