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
10038 2387 3013

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 are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.

View solution in original post

Replies 2 (2)

suyash1
Shopify Partner
10711 1324 1699

@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
10038 2387 3013

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 are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.