Help Styling Breadcrumbs with css Prestige

Store Design
1

Good day,

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

This is how it looks now:

22.png
22.png1159×627 213 KB

This is the desired result:

Linhks.png
Linhks.png1822×396 113 KB

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 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!

2

@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!

3

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;
}
4

@dmwwebartisan @Kinjaldavra Thank you for your time,

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

5

hello @NZA

nav.breadcrumb, nav.breadcrumb a.Breadcrumbs, nav.breadcrumb span {
       margin-top: 12px;
}
6

@Kinjaldavra 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;
    }
7

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;
}
}