How can I align the logo and menu on the same line in the studio theme?

Solved

How can I align the logo and menu on the same line in the studio theme?

ATTIVO
Explorer
69 1 18

hello I wanted to know if you can help me
i am using the studio theme
and I want to align the menu with the logo on the same line
currently the logo is one line above the menu

Attivo
Accepted Solution (1)
AvadaCommerce
Shopify Partner
3879 840 1000

This is an accepted solution.

Hi @ATTIVO ,

 

You can follow the instruction below:

1. Go to Online Store->Theme->Edit code
2. Asset->/base.css->paste below code at the bottom of the file:

@media screen and (min-width: 990px) {
.header--top-left {
    grid-template-areas: "heading navigation icons" !important;
    grid-template-columns: 1fr 2fr 1fr !important;
}
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

banned

View solution in original post

Replies 11 (11)

AvadaCommerce
Shopify Partner
3879 840 1000

Hi @ATTIVO ,

 

Please share your store URL and if your store is password protected then please provide password too.

So that we can help you.

Thank you.

banned
ATTIVO
Explorer
69 1 18

https://attivomx.myshopify.com/

 

password.   attivo

Attivo

Denishamakwana
Shopify Partner
1408 173 232

Welcome to shopify community.

Please share your store URL and if your store is password protected then please provide password too.

Thank you.

If helpful then please Like and Accept Solution. Want to modify or custom changes on store Hire me. Feel free to contact me on denishabhensdadiya@gmail.com | Shopify Design Changes | Custom Modifications In to Shopify Theme
ATTIVO
Explorer
69 1 18

https://attivomx.myshopify.com/

 

password.  attivo

Attivo
AvadaCommerce
Shopify Partner
3879 840 1000

This is an accepted solution.

Hi @ATTIVO ,

 

You can follow the instruction below:

1. Go to Online Store->Theme->Edit code
2. Asset->/base.css->paste below code at the bottom of the file:

@media screen and (min-width: 990px) {
.header--top-left {
    grid-template-areas: "heading navigation icons" !important;
    grid-template-columns: 1fr 2fr 1fr !important;
}
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

banned
ATTIVO
Explorer
69 1 18

Thanks a lot
It has been wonderful, your work is great
I wanted to know if you can help me with one more thing?
can you help me remove this section that appears in my banner slider

Attivo
AvadaCommerce
Shopify Partner
3879 840 1000

Hi @ATTIVO ,

 

You can try below code in base.css file: 

.slideshow__controls {
    display: none !important;
}

 

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

banned
ATTIVO
Explorer
69 1 18

you are amazing
one last question
I want to have different images in my banner in the desktop view and the mobile view
How do i do it?
I prefer that you can place different images

Attivo
AvadaCommerce
Shopify Partner
3879 840 1000

Hi @ATTIVO ,

 

This part is related to custom code. You can hire a shopify expert for support

 

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

banned
rancho1
Visitor
1 0 0

Hello! Using this but how do I get the menu closer to the logo? Still a large gap between logo on the left and nav menu. Menu is closer centered than not. Thanks!

Randy_Schreiber
Visitor
1 0 0

Thanks, this worked great aligning the menu and logo but my menu navigation headings are on 2 lines now.  Can you help me fix this?  https://www.gutterbrush.com/    Or maybe I need to reduce my menu to 4 items? Screenshot 2024-01-16 4.05.09 PM.png

 

Thank You!

Randy