How to create responsive Breadcrumbs in materializecss?

Question

I am using materializecss for front end In my jsp pages, I am using Breadcrumbs for show information on top of the page it's working fine but whenever I seen my pages on mobile browser or small screen then whole Breadcrumbs is not showing. So how to make responsice any suggestion ?

<div class="section" style="padding-bottom:0;">             <div class="row">                 <nav class="breadcrumb-nav col l12 truncate" style="height:40px; line-height: 40px;">                     <a class="breadcrumb" href="<c:url value="/"/>">Home</a>                     <a class="breadcrumb" href="<c:url value="/${currentCityName}"/>">${currentCity.name}</a>                     <c:forEach items="${breadCategories}" var="c">                         <c:set var="puri"><catalog:CategoryUri category="${c}"/></c:set>                         <a class="breadcrumb" href="<c:url value="/${currentCityName}${puri}"/>">${c.name}</a>                     </c:forEach>                                     <a class="breadcrumb" href="javascript:;">${product.name}</a>                 </nav>                                </div>         </div> 

Answer 1

In my opinion, for the mobile device you can ignore the breadcrumb part as it doesn't looks nice on a mobile screen. Hence, it would be a waste of space.

e.g.:

@media only screen and (max-width : 992px) {    .breadcrumb-nav {       display:none;    } } 

Or you can also decrease the font size of your breadcrumb:

@media only screen and (max-width : 992px) {    .breadcrumb-nav {       font-size:;    } }