Dawn theme: Move menu to the the left sidebar

[Laimomo]

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.

[KetanKumar]

@Laimomo 

yes it possible code please confirm 

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

[Laimomo]

Hello @KetanKumar 

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

[oscprofessional · 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.

[Laimomo]

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

[Narelle_Phelan]

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]

@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

[Luke1scott]

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]

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

[KetanKumar]

@alexandermen 

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

[alexandermen]

@KetanKumar DM with all information is out 👍

[KetanKumar]

@alexandermen 

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

[GabijaZ]

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]

@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

[GabijaZ]

@KetanKumar 

link: https://hopeurok.com/

Password: HOPEUROK2022

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

[MidnightCHEF]

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/ 

[KetanKumar]

@MidnightCHEF 

yes, please confirm 

this look

[MidnightCHEF]

Yes! looks good
will the footer be the same?

[MidnightCHEF]

Yes! looks good
will the footer be the same?

[KetanKumar]

@MidnightCHEF 

yes as you like this customization code 

[MidnightCHEF]

nice, thanks 🙂

[koljapi]

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

[yooquagen]

could you send me this code?

[pch00]

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