Help Styling Breadcrumbs with css Prestige

Solved
NZA
Pathfinder
105 12 32

Good day,

I need some assistance styling the breadcrumbs that i added to the theme.

This is how it looks now:

22.png

This is the desired result:

Linhks.png

I tryed modifying it myself with css, i managed to make the changes and move the bar, but it moves the same for mobile and desktop, This is the code that i used

#shopify-section-product-template  .breadcrumb { 
    padding: 15px;
    background: #ffff;
    font-size: 14px;
    margin-top: 0px;
    margin-left: 0px;
    }

This code applies well on desktop but on mobile it looks really bad, how to separate the two?

 

Also i don;t know how to add spacing between the sections of the <nav> bar, it would be awesome to have some spacing between them.

The code that i added is on the top of the "product-template.liquid" 

I would really apreciate some help with this!

Store url: https://donutsole-hu.myshopify.com/

Password: twilye

Thank you very much in advance!

dmwwebartisan
Shopify Partner
7292 1721 2292

@NZA 

Please add the following code at the bottom of your assets/theme.css file.

nav.breadcrumb, nav.breadcrumb a.Breadcrumbs, nav.breadcrumb span {
    margin-left: 8px;
    margin-right: 8px;
}

Hope this works.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
Natztech
Shopify Partner
1306 359 895

hello @NZA 


please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

nav.breadcrumb, nav.breadcrumb a.Breadcrumbs, nav.breadcrumb span {
    margin-left: 10px;
    margin-right: 10px;
}

 

Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store
NZA
Pathfinder
105 12 32

@dmwwebartisan  @Natztech Thank you for your time, 

what css can i add to move the bar to the bottom right a bit ?

0 Likes
Natztech
Shopify Partner
1306 359 895

hello @NZA 

nav.breadcrumb, nav.breadcrumb a.Breadcrumbs, nav.breadcrumb span {
       margin-top: 12px;
}
Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store
NZA
Pathfinder
105 12 32

@Natztech The code work on the desktop version, can you please tell me ho can i apply these setting on mobile ?

padding: 15px;
    background: #ffff;
    font-size: 14px;
    margin-top: 0px;
    margin-left: 0px;
    }
0 Likes
NZA
Pathfinder
105 12 32

This is an accepted solution.

This is the code for mobile styling, i hope someone finds this useful

@media screen and (max-width: 640px){
nav.breadcrumb, nav.breadcrumb a.Breadcrumbs, nav.breadcrumb span {
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 30px;
    font-size: 12px;
    text-transform: uppercase;
}
}
0 Likes