How to re-adjust the position of the logo and the menu on the web by not affecting how it looks on the mobile? We need our navigation to look the same as in the attached example.
One image displays our store header, the other shows how it needs to look.Our logo need to go fully to the left and menu to the right. How could I solve it?
Please share your store URL.
Hi @elusauna
I’m Richard Nguyen - CRO Expert at PageFly- Free Landing Page Builder.
You can try with this code.
Follow this:
Go to Online Store->Theme->Edit code->base.css->paste bellow code in bottom of file
.header.header–middle-left.page-width.header–has-menu{
padding-left: 0px !important;
padding-right: 0 !important;
margin-left: 30px !important;
}
If you feel my answer is helpful, like it or mark it as a solution. Let me know if you have any questions.
Best regards,
Richard | PageFly
Hello, thank you! It solved the logo position, but how about the menu? It should go to the right side ?Thank you
.header__inline-menu {
justify-content: end;
display: flex;
}
@media screen and (min-width: 990px){
.header--middle-left {
grid-template-areas: "heading navigation icons";
grid-template-columns: auto 1fr auto !important;
column-gap: 2rem;
}}
Add this css at the bottom of Online Store->Theme->Edit code->Assets->theme.scss.liquid
Remove this CSS..
Thank youHi Richard.
Im using Page fly to design our pages as well.
Im having the same issue with the logo in left and all the others links at the menu should be inline.
Can you give me a hint/hand on that?
Hi @WendelBRL ,
I noticed you have completed the request. Is there anything else I can help you with?
Best,
Richard