Debut Theme - Have the main menu bar on a new line separate from logo

Jackzavelli
Tourist
34 0 2

Hi All,

Can someone help please. I am using the Debut theme and want to make my shop header look like:

Jackzavelli_1-1602607969946.png

*Red box on the left is where the logo should be and longer box on the bottom is the main menu navigation

At the moment everything is on one line as default.

Thank you in advance!

0 Likes

Hello ,
Please share your site URL .
So that I can check and let you know the exact solution here.

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
0 Likes
Jackzavelli
Tourist
34 0 2

Hi @oscprofessional ,

Thank you for getting back to me.

I have dm'd you the details.

Many Thanks

0 Likes

Hi,

Firstly do this setting from customize theme

Capture.PNG

Then
Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

 

.medium-up--one-third {
    width: 50.33333%;
}
.medium-up--push-one-third {
    left: auto;
}
h1.h2.site-header__logo {
    text-align: left;
}
If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
Jackzavelli
Tourist
34 0 2

Hi @oscprofessional ,

Thank you that worked!

Is there a way to also drop the cart to the main menu line and instead of the symbol have the word "cart" ?

Thank you in advance!

0 Likes
Jackzavelli
Tourist
34 0 2

Hi @oscprofessional ,

I have tested the code you provided and while it does work for the main page. When i click on other links the logo is not all the way to the left as it should be it is slightly near the middle.

Jackzavelli_0-1602688338529.png

This is how it should look but when i click on another page the logo moes to the right:

Jackzavelli_1-1602688391189.png

Please advise.

Many Thanks

0 Likes
.h2.site-header__logo {
    text-align: left;
}

Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
Jackzavelli
Tourist
34 0 2

Hi @oscprofessional ,

Thank you that worked!

Can you also advise on how I can move the Cart to the line below (same line as main menu) and add the word "Cart next to it please?

Thanks in advance!

0 Likes
Jackzavelli
Tourist
34 0 2

Hi @oscprofessional ,

I have just added my logo and upon adding this the logic no longer works.

It is now nearer to the center.

Are you able to advise how I can get the image to move to the left please.

Many Thanks

0 Likes
.grid__item.medium-up--one-third.medium-up--push-one-third.logo-align--center {
    left: 0;
}
.medium-up--one-third {
    width: auto;
}
a.site-header__logo-image.site-header__logo-image--centered {
    margin: 0;
}

 

Then
update this css from the previous css....

Online Store->Theme->Edit code->Assets->theme.scss.liquid

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
0 Likes