Solved

Dawn theme: Move menu to the the left sidebar

Laimomo
Tourist
8 0 3

Hi there!

I'm looking for support to move the main menu from the center of the header to the left sidebar position (Attached a screenshot with the rendering of the final effect I am looking for)

website link: https://hands-of-fashion.myshopify.com/
password: laimomo2020

Thank you in advance.

screenshot.jpg

Accepted Solution (1)
oscprofessional
Shopify Partner
15830 2369 3072

This is an accepted solution.

Hello @Laimomo

1)Go to Online store ->Theme ->Edit code
2)Asset -> base.css

And add the code in this file

.header__inline-menu {
    position: absolute;
    top: 136%;
    left: 15px;
}
.list-menu--inline {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}


Hope this will help you.

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing

View solution in original post

Replies 22 (22)

KetanKumar
Shopify Partner
36839 3635 11972

@Laimomo 

yes it possible code please confirm 

KetanKumar_0-1634870413794.png

 

also do you always fix position all pages or only for home page? 

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Laimomo
Tourist
8 0 3

Hello @KetanKumar 

thank you for your help.
Yes, the ideal solution is to have it like this on all pages

 

oscprofessional
Shopify Partner
15830 2369 3072

This is an accepted solution.

Hello @Laimomo

1)Go to Online store ->Theme ->Edit code
2)Asset -> base.css

And add the code in this file

.header__inline-menu {
    position: absolute;
    top: 136%;
    left: 15px;
}
.list-menu--inline {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}


Hope this will help you.

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
Laimomo
Tourist
8 0 3

Hello @oscprofessional 

That's work fine, thank you so much!
I hope I can ask you one more help: 

The menu in that position right now overlaps the image. I found a way to reduce the images, but the page automatically aligns to the left and even with smaller photos the overlap remains. is it possible to know how to move the whole block (excluding menu) of the product page further to the right in order to avoid overlapping?
I attach the image.
Thanks in advance

screenshot2.jpg

Narelle_Phelan
Visitor
1 0 0

Hi There, 

 

I tried below however it placed the side menu over the main banner image rather than in the top section - can you please help me to understand how to make it sit in the top section? I also would like to move the search symbol to the right - this website is the top navigation layout I am trying to achieve with the Dawn theme. https://ilionema.com/

 

Any help greatly appreciated!

 

Thanks

Nelly 

oscprofessional
Shopify Partner
15830 2369 3072

@Narelle_Phelan ,

.main-header--tools-left {
    flex-direction: row-reverse;
}

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

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
Luke1scott
Visitor
1 0 0

hi there

ive copied the code and put it in the top of the file u said. only prople now is the home, catalogue etc has dissapeared and doesnt show on the left side. if you could pls help i would appreciate it.

 

alexandermen
Shopify Partner
9 0 3

This worked great, but how can I edit more space to the right of the sidebar? Like in this picture:

 

Artboard 1.jpg

 

KetanKumar
Shopify Partner
36839 3635 11972

@alexandermen 

can you please share store url so i will check and let you know

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
alexandermen
Shopify Partner
9 0 3

@KetanKumar DM with all information is out 👍

KetanKumar
Shopify Partner
36839 3635 11972

@alexandermen 

thanks for update i will check and let you know whats possible to for that case

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
GabijaZ
Tourist
5 0 1

Hello!

 

I wonder maybe there is some way  to  move main menu to the left sidebar only in home page?  That would really help, because in other pages it covers important content. Thank you in advance 🙂

KetanKumar
Shopify Partner
36839 3635 11972

@GabijaZ 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
GabijaZ
Tourist
5 0 1

@KetanKumar 

 

link: https://hopeurok.com/

Password: HOPEUROK2022

Pleases don't mind the mess, page is still under construction:)

MidnightCHEF
Excursionist
24 0 11

Hey, when i add the code" .header__inline-menu { position: absolute; top: 136%; left: 15px; } .list-menu--inline { display: flex; flex-wrap: wrap; flex-direction: column; }" 
it overlaps the content, is it possible to make a gap between the content and the header?
Here you can see how it looks now and how i want it to look like 
https://studio-stars.com/

Screenshot 2023-02-11 at 14.24.09.jpgScreenshot 2023-02-11 at 14.24.14.jpg

 

KetanKumar
Shopify Partner
36839 3635 11972

@MidnightCHEF 

yes, please confirm 

this look

KetanKumar_0-1676136682125.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
MidnightCHEF
Excursionist
24 0 11

Yes! looks good
will the footer be the same?

MidnightCHEF
Excursionist
24 0 11

Yes! looks good
will the footer be the same?

KetanKumar
Shopify Partner
36839 3635 11972

@MidnightCHEF 

yes as you like this customization code 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
MidnightCHEF
Excursionist
24 0 11

nice, thanks 🙂

koljapi
Visitor
1 0 0

Hey, I really like that result. Could you please give me the code also? It would be much appreciated 🙂

pch00
Visitor
1 0 0

hello, please could you give the code to achieve the same result? I would appreciate it 🙂