Solved

navigation layout misaligned after importing to new store, debut theme

Matt_Dubinsky
Excursionist
19 0 6

I have recently moved my website from one shop to another within shopify under the same account. 

 

When I exported my debut theme from the old site and imported it to the new one I noticed that on the mobile feed version of the site, the top part of the menu navigation now is overlapping the search field.

 

I am wondering how to fix this.

 

To see how it looked correctly on my original site see the following image

correct formatting .jpg

you can view this page online here: https://chelseasbeads.myshopify.com/

 

this is how it incorrectly looks now on my new site after importing the theme from the old site:

incorrect formatting .jpg

you can see this on the new site here: https://chelseasbeads.com/

use code: 12345

to access the site.

 

if anyone knows how to fix this i would greatly appreciate your help

 

 

Accepted Solutions (2)

ThePrimeWeb
Shopify Partner
1106 289 222

This is an accepted solution.

Hey @Matt_Dubinsky,

Please try this. Could be that some things broke during the transfer.

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
@media only screen and (max-width: 768px) {
  .site-header__search.hc-search {
    margin-top: 10px !important;
  }  
}
</style>

 

 Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1706520137930.png

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com

View solution in original post

ThePrimeWeb
Shopify Partner
1106 289 222

This is an accepted solution.

Hey @Matt_Dubinsky,

Delete the code I gave you earlier and try this instead (Same steps)

<style>
@media screen and (max-width: 749px) {
    body {
        padding-top: 0px !important;
    }

    #shopify-section-header {
        position: relative !important;
    }
}
</style>

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com

View solution in original post

Replies 5 (5)

ThePrimeWeb
Shopify Partner
1106 289 222

This is an accepted solution.

Hey @Matt_Dubinsky,

Please try this. Could be that some things broke during the transfer.

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
@media only screen and (max-width: 768px) {
  .site-header__search.hc-search {
    margin-top: 10px !important;
  }  
}
</style>

 

 Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1706520137930.png

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com
Matt_Dubinsky
Excursionist
19 0 6

that worked great but have one additional question

 

I would like to have the announcement about the free shipping be located in the banner at the top of the page instead of as a header to the collection inline as it is now

 

when i try to turn the header on in debut theme it is pushing the chelseas beads icon level heading over the search box again

 

see image here to see how it looks with your code fix which worked perfectly

 

correct.jpg

 

but then here is what happens when you try to turn the banner on

 

bad.jpg

 

would greatly appreciate you help

 

thanks!

 

ThePrimeWeb
Shopify Partner
1106 289 222

This is an accepted solution.

Hey @Matt_Dubinsky,

Delete the code I gave you earlier and try this instead (Same steps)

<style>
@media screen and (max-width: 749px) {
    body {
        padding-top: 0px !important;
    }

    #shopify-section-header {
        position: relative !important;
    }
}
</style>

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com
Matt_Dubinsky
Excursionist
19 0 6

do you know how i can get the header to appear on all pages i only seems to show on my homepage

 

so like for example if i click on the african red jasper collection the page looks like this and is missing the header (again in debut theme)

no header.jpg

Matt_Dubinsky
Excursionist
19 0 6

here is where i am trying to add the header

 

it works on the home page here

where added.jpg

 

but once you go to the product page or any other page aside from the home page it does not show but the back end says it is trying to show it, and least it seems like it

 

thanks!