navigation layout misaligned after importing to new store, debut theme

Matt_Dubinsky · ‎01-28-2024

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

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:

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

ThePrimeWeb · ‎01-29-2024

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.

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

ThePrimeWeb · ‎01-31-2024

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 or check out the website
Check out our interview with Shopify!

View solution in original post

ThePrimeWeb · ‎01-29-2024

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.

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

Matt_Dubinsky · ‎01-31-2024

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

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

would greatly appreciate you help

thanks!

ThePrimeWeb · ‎01-31-2024

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 or check out the website
Check out our interview with Shopify!

Matt_Dubinsky · ‎02-01-2024

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)

Matt_Dubinsky · ‎02-01-2024

here is where i am trying to add the header

it works on the home page here

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!

navigation layout misaligned after importing to new store, debut theme