Debut Theme: Aligning breadcrumbs to page content

Solved
rbelle
Tourist
31 0 14

Hi,

I've added a breadcrumb navigation using a Shopify tutorial and aligned it to the filter toolbar.

 

rbelle_0-1619068591403.png   

However, as soon as I resize the window, it does not stay in place.

rbelle_1-1619069141331.png

I'm not too sure how to make the margin responsive, these are my current styles applied:

nav.breadcrumb{
  margin: 0 auto;
  margin-left: 150px;
  text-transform: uppercase;
  font-size: 0.8em;
}

.template-product .breadcrumb{
  margin-bottom: 60px;
}

I've also set a custom page width for collection pages to be 90%.

Does anyone know how to make it align responsively to the main content of my pages?

Thank you!

0 Likes
Pallavi
Shopify Expert
1269 174 209

Hello There,

Please share your store URL and password.
So that I will check and let you know the exact solution here.

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes
g33kgirl
Shopify Partner
211 52 65

Hi @rbelle, you can use media queries in CSS to align responsively.

Something like this:

@media only screen and (max-width: 768px) {
nav.breadcrumb{
  margin-left: 20px; <-- adjust 150px to align it to 'Filter', let's say 20px.
}

.template-product .breadcrumb{
  margin-bottom: 60px; <-- adjust 60px responsively.
}
}

 

If you found my answer helpful, please LIKE and ACCEPT.
buymeacoffee.com/g33kgirl ☕
If you're not comfortable with code, please modify code files at your own risk.
Do NOT give out your passwords unless absolutely necessary.
rbelle
Tourist
31 0 14

Hi g33kgirl,

Thank you for your suggestion! I've tried that and have yet to figure out how media queries work, but I'll be on it

0 Likes
rbelle
Tourist
31 0 14

Hi Pallavi,

The theme in use is currently not live yet, so here is a preview of it

https://q9hy8aknp98lpoa5-55306092726.shopifypreview.com/collections/bottoms

Thank you!

 

This is an accepted solution.

Hello rbelle,
Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.css

@media only screen and (max-width: 749px){
nav.breadcrumb {
    padding-left: 22px !important;
    padding-right: 22px !important;
    margin: 0 auto !important;
    max-width: 90% !important;
}
}
nav.breadcrumb {
    margin: 0 auto !important;
    padding-left: 55px !important;
    padding-right: 55px !important;
    max-width: 90% !important;
}
If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
Pallavi
Shopify Expert
1269 174 209

This is an accepted solution.

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > theme.scss.liquid and paste this at the bottom of the file:

@media only screen and (max-width: 749px){
nav.breadcrumb {
padding-left: 22px !important;
padding-right: 22px !important;
margin: 0 auto !important;
max-width: 90% !important;
}
}


@media only screen and (min-width: 749px){
nav.breadcrumb {
margin: 0 auto !important;
padding-left: 55px !important;
padding-right: 55px !important;
max-width: 90% !important;
}
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
g33kgirl
Shopify Partner
211 52 65

You don't need to do anything apart from add the code which I posted right after the code which you originally posted in your CSS file.

If you found my answer helpful, please LIKE and ACCEPT.
buymeacoffee.com/g33kgirl ☕
If you're not comfortable with code, please modify code files at your own risk.
Do NOT give out your passwords unless absolutely necessary.
rbelle
Tourist
31 0 14

Thank you everyone for the help! It works now

Pallavi
Shopify Expert
1269 174 209

Kindly feel free to get back to me if you need any further assistance Thanks!

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes