title: How to show the breadcrumbs in a single line in wordpress?
body: <p>I have a code in php to show the breadcrumb it outputs like this</p>
  <p><a href="https://gist.githubusercontent.com/techpulsetoday/c7f8fa1a5f170f4ecbb049b63d0cd140/raw/2dd52a19e786390fd6016478ff201b5e6c4ae818/breadcrumbs-code-without-plugin.php" rel="nofollow noreferrer">the link i found the php code</a> <br>
  output <br>
  <code>&lt;div id=&quot;crumbs&quot;&gt;&lt;a href=&quot;http://localhost&quot;&gt;Home&lt;/a&gt; » &lt;a href=&quot;http://localhost/about/&quot;&gt;About The Tests&lt;/a&gt; » &lt;span class=&quot;current&quot;&gt;Page Image Alignment&lt;/span&gt;&lt;/div&gt;</code></p>
  <p>and it looks like this</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;center&gt;
  &lt;!-- Do Not use &lt;center&gt; tag ! !--&gt;
  
  
  &lt;div id="crumbs"&gt;&lt;a href="http://localhost"&gt;Home&lt;/a&gt;  &lt;a href="http://localhost/about/"&gt;About The Tests&lt;/a&gt;  &lt;span class="current"&gt;Page Image Alignment&lt;/span&gt;&lt;/div&gt;
  
  
  &lt;!-- Do Not use &lt;/center&gt; tag ! !--&gt;
  &lt;/center&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>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</p>
  <p><a href="https://i.stack.imgur.com/SuPdL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SuPdL.png" alt="" /></a></p>
  <p>Please tell how to. <strong>thanks for your help</strong> !</p>
  <p>image desktop <br>
  <a href="https://i.stack.imgur.com/MRI1r.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MRI1r.png" alt="" /></a></p>
  <p>image mobile <br>
  <a href="https://i.stack.imgur.com/HrwGt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HrwGt.png" alt="" /></a></p>