Move Menu under announcment bar

Solved

Move Menu under announcment bar

stefanensko
Explorer
47 0 7

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

stefanensko_1-1718195793250.png

 

But i would like to have it as

- annoucment bar

- menu

- logo etc

 

Thanks if helping

 

www.danicoffeeshop.com

 

 

Sense Theme 2.0

 

 

Accepted Solution (1)

Made4uo-Ribe
Shopify Partner
6961 1656 2041

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:

Made4uoRibe_0-1718200222060.png

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.

View solution in original post

Replies 2 (2)

suyash1
Shopify Partner
9581 1198 1537

@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;}
}
Support me | To build shopify pages use pagefly | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.

Made4uo-Ribe
Shopify Partner
6961 1656 2041

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:

Made4uoRibe_0-1718200222060.png

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.