Shopify themes, liquid, logos, and UX
Hi all, i'm looking a way to move my menu bar under the announcment bar
This is my actual condition
- announcment bar
- logo etc
- menu
But i would like to have it as
- annoucment bar
- menu
- logo etc
Thanks if helping
Sense Theme 2.0
Solved! Go to the solution
This is an accepted solution.
Hi @stefanensko
Check this one.
From your Shopify admin dashboard, click on "Online Store" and then "Themes"
Find the theme that you want to edit and click on "Actions" and then "Edit code".
In the "theme. Liquid" file. Find the </body> tag and paste the code below before the tag.
<style>
@media screen and (min-width: 990px) {
.header--top-left, .header--middle-left:not(.header--has-menu) {
grid-template-areas:
"navigation navigation"
"heading icons";
}
.header predictive-search {
top: 90px;
}
}
</style>
And Save.
Result:
@stefanensko - please add this css to the very end of your base.css file and check
@media screen and (min-width: 990px){
.header{grid-template-areas: "navigation navigation" "heading icons";}
.header predictive-search{top: 89px;}
}
This is an accepted solution.
Hi @stefanensko
Check this one.
From your Shopify admin dashboard, click on "Online Store" and then "Themes"
Find the theme that you want to edit and click on "Actions" and then "Edit code".
In the "theme. Liquid" file. Find the </body> tag and paste the code below before the tag.
<style>
@media screen and (min-width: 990px) {
.header--top-left, .header--middle-left:not(.header--has-menu) {
grid-template-areas:
"navigation navigation"
"heading icons";
}
.header predictive-search {
top: 90px;
}
}
</style>
And Save.
Result:
Shopify and our financial partners regularly review and update verification requiremen...
By Jacqui Mar 14, 2025Unlock the potential of marketing on your business growth with Shopify Academy's late...
By Shopify Mar 12, 2025Learn how to increase conversion rates in every stage of the customer journey by enroll...
By Shopify Mar 5, 2025