Shopify themes, liquid, logos, and UX
Hello,
I need some help with removing the header logo/title element and then moving the navigation up in its place on the Dawn theme for both desktop and mobile views.
https://drive.google.com/file/d/1mKcQyeyAYRupoOf0_i0CQehycqCg92ma/view?usp=sharing
any help on this would be golden - thanks!
Solved! Go to the solution
This is an accepted solution.
Please add the following code at the bottom of your assets/base.css file.
@media screen and (min-width: 990px){
.header:not(.header--middle-left) .header__inline-menu {
margin-top: -3.95rem !important;
}
.header__icons {
display: flex;
grid-area: icons;
justify-self: end;
margin-top: -2.95rem !important;
}
.header--top-center>.header__search, .header:not(.header--top-center) *>.header__search {
margin-top: -2.95rem !important;
}
}
Thanks!
Please share your store URL.
Please share store password!
Thanks!
@dmwwebartisan wrote:Please share store password!
Thanks!
Little nudge if you're able to check it out sir, thx!
This is an accepted solution.
Please add the following code at the bottom of your assets/base.css file.
@media screen and (min-width: 990px){
.header:not(.header--middle-left) .header__inline-menu {
margin-top: -3.95rem !important;
}
.header__icons {
display: flex;
grid-area: icons;
justify-self: end;
margin-top: -2.95rem !important;
}
.header--top-center>.header__search, .header:not(.header--top-center) *>.header__search {
margin-top: -2.95rem !important;
}
}
Thanks!
thank you sir! appreciate the help !
Hello @Katman ,
It's possible but not without the customization.
If you can then find the logo and navigation code once found move navigation code in place of logo. Finally do css modification and it will done.
Alternatively hire a developer to do it.
Thanks
@Denishamakwana wrote:please add below code in bottom of assets/base.css file@media screen and (min-width: 990px).header--has-menu:not(.header--middle-left) {display: flex;}.header--top-center>.header__search {width:10%;}@media screen and (min-width: 990px).header:not(.header--middle-left) .header__inline-menu {margin-top: 0;width: 80%;}.header__icons {width: 10%;justify-content: end;}@media screen and (min-width: 990px).header--top-center .header__inline-menu>.list-menu--inline {width: 100%;}
Thanks! I added the code as instructed but it didn't seem to show any changes.
I have tried the suggested solutions with no effect. I am using Dawn theme.
https://tumblers-galore-more-8338.myshopify.com/?_ab=0&_fd=0&_sc=1
User | RANK |
---|---|
225 | |
168 | |
65 | |
54 | |
53 |
On our Shopify Expert Marketplace, you can find many trusted third party developers and fr...
By Arno Nov 27, 2023You've downloaded the Search & Discovery app from the Shopify App store, and as you're ...
By Skye Nov 8, 2023The year-end shopping season is just around the corner. Is a flash sale on your radar? Are...
By Jasonh Nov 6, 2023