How to show the breadcrumbs in a single line in wordpress? - html

Question

I have a code in php to show the breadcrumb it outputs like this
the link i found the php code
output
<div id="crumbs">Home » About The Tests » <span class="current">Page Image Alignment</span></div>
and it looks like this
#crumbs a,
#crumbs span {
border-radius: 0px 10px 10px 0px;
box-shadow: -3px 2px 18px -3px #000;
background: #4489ff;
width: max-content;
display: inline-block;
color: white;
font-size: 17px;
padding: 6px;
font-weight: bolder;
margin-left: -1px;
margin-top: 1rem;
text-decoration: none;
}
#crumbs span.current{
background: #eef5ff !important;
color: black !important;
}
<center>
<!-- Do Not use <center> tag ! !-->
<div id="crumbs">Home About The Tests <span class="current">Page Image Alignment</span></div>
<!-- Do Not use </center> tag ! !-->
</center>
i want to make the breadcrumbs a single line and fancy like this .
i have made 90% percent of it but i don't know how to show the box shadow like the image down
Please tell how to. thanks for your help !
image desktop
image mobile

Answer 1

EDIT: I removed the absolute positioning method, centered it and made it responsive.
.crumbswrapper {text-align: center;}
#crumbs {
text-align: left;
display: inline-block;
font-family: roboto;
font-weight: 400;
letter-spacing: 1px;
text-transform: uppercase;
font-size: 12px;
}
.innerwrap {
display: inline-block;
background:#4489ff;
padding-right: 10px;
margin: 0 0 0 -5px;
}
.innerwrap:last-child {
background: none;
}
.innerwrap:nth-last-child(2) {
background: #eef5ff;
}
#crumbs a, #crumbs span {
background:#4489ff;
border-radius: 0 20px 20px 0;
box-shadow: 5px 0 10px -4px #444;
color: white;
padding: 10px 25px 10px 20px;
text-decoration: none;
white-space: nowrap;
line-height: 34px;
}
.innerwrap:nth-last-child(2) a {
box-shadow: none!important;
}
#crumbs span.current{
background: #eef5ff !important;
box-shadow: none!important;
white-space: nowrap;
color: #4489ff!important;
}
<div class="crumbswrapper">
<div id="crumbs">
<div class="innerwrap">Home</div>
<div class="innerwrap">About The Tests</div>
<div class="innerwrap"><span class="current">Page Image Alignment</span></div>
</div>
</div>