How to hide breadcrumbs from product page on mobile

  • leonidas1972

    (@leonidas1972)


    4 years ago

    Hi

    I need to hide the breadcrumbs from a single product page when the page is viewed on mobile devices.
    When the page will be viewed on a desktop, laptop, tablet I need the breadcrumbs to be displayed – be always visible as it is now.

    I’m a designer, not a developer.
    I use Astra theme, Breadcrumb NavXT for generating the breadcrumbs, Breadcrumb NavXT Paths Add On, and Yoast

    Thanks again for the great plugin

    Leonidas

Viewing 1 replies (of 1 total)
  • Plugin Author John Havlik

    (@mtekk)

    Hi Leonidas,

    The best way to do this is likely with CSS media-queries (see https://css-tricks.com/a-complete-guide-to-css-media-queries/) where you hide the breadcrumb trail on screens that are too small. The below example should get you going, you may need to change 700px to a different value based on the screen widths you are targeting.

    @media(max-width: 700px){
    .breadcrumbs{
        display: none;
    }
}
Viewing 1 replies (of 1 total)
  • The topic ‘How to hide breadcrumbs from product page on mobile’ is closed to new replies.