Breadcrumb navigation disappears in mobile version

Site URL: https://www.abeno.co.uk/order

Hi guys, 

Quick question, we've got a couple online stores up with breadcrumb navigation which work great on the computer, but disappear in the mobile version and seem to allow only the arrow options. Is there a way to keep the breadcrumb nav in the mobile site? The thing I'm worried most about is frustrating customers, because after you add an item to basket you have to press back on the browser to go to the previous page, or through the main site navigation, both options of which bring the customer back to the top of the main store page regardless of what category they might have been in.

I'd be very grateful if someone could give me a hand with this.

Cheers,

Matthew

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
.ProductItem .ProductItem-nav .ProductItem-nav-breadcrumb {
    display: block;
}
.ProductItem .ProductItem-nav {
    flex-direction: column;
}
}

That did the job! Thanks so much tuanphan!

On 6/14/2020 at 2:30 AM, tuanphan said:

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
.ProductItem .ProductItem-nav .ProductItem-nav-breadcrumb {
    display: block;
}
.ProductItem .ProductItem-nav {
    flex-direction: column;
}
}

 

HI there! What CSS would include the product's category in between this? Thanks in advance!!

On 12/4/2020 at 4:52 PM, mars2 said:

HI there! What CSS would include the product's category in between this? Thanks in advance!!

Hi,

I don't quite understand the question..

On 6/14/2020 at 11:30 AM, tuanphan said:

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
.ProductItem .ProductItem-nav .ProductItem-nav-breadcrumb {
    display: block;
}
.ProductItem .ProductItem-nav {
    flex-direction: column;
}
}

 

That helped me as well! Thank you @tuanphan