eigenen Breadcrumb einfügen (HTML+CSS)

(@assv)

Hallo zusammen,
Ziel: ich will den Breadcrumb von woocommerce entfernen und durch eigenen ersetzen.

Das Entfernen hat geklappt indem ich folgenden CSS eingegeben habe:

.page-title-inner
{
	display: none
}
.page-title-bg
{
	display: none
}

So nun habe ich einen HTML Code und CSS mit dem ich einen eigenen Breadcrumb erschaffen habe:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Breadcrumbs</title>
	<script src="https://kit.fontawesome.com/a85a8c66b0.js"></script>
	<link rel="stylesheet" href="styles.css">
</head>
<body>

<div class="wrapper">
  <ul>
    <li>
		<a href="https://www.sv-creative.de/">
			<i class="fas fa-home icon"></i>
			<p>Home</p>
		</a>
	</li>
    <li class="active">
		<a>
			<i class="fas fa-user-tie icon"></i>
			<p>About Us</p>
		</a>
	 </li>
  </ul>
</div>

</body>
</html>

und CSS:
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap');

*{
  margin: 0;
  padding: 0;
	box-sizing: border-box;
	list-style: none;
  text-decoration: none;
  font-family: 'Josefin Sans', sans-serif;
}

.wrapper
{	
  position: static;
  top: 0%;
  left: 0%;
  transform: translate(0%,0%);
}

.wrapper ul
{
  display: flex;
}

.wrapper ul li{
  width: 80px;
  margin-right: 14px;
  position: relative;
}

.wrapper ul li: last-child
{
	margin-right: 0;
}

.wrapper ul li a
{
	text-align: center;
	color: #003d60;
	font-size: 18px;
}

.wrapper ul li a .icon
{
	display: block;
	width: 60px;
	height: 60px;
	margin: 0 auto 12px;
	background: #003d60;
	color: #fff;
	line-height: 60px;
	border-radius: 50%;
	font-size: 40px;
	box-shadow: 0 7px 12px rgba(0,24,38,0.7);
}

.wrapper ul li:before
{
	content: ">";
	position: absolute;
	top: 25%;
	right: -25px;
	transform: translatey(-50%);
	font-size: 25px;
	font-weight: bold;
	color: #003d60;
}

.wrapper ul li:last-child:before
{
	display: none;
}

.wrapper ul li.active a .icon
{
	background: #fff;
	color: #003d60;
}

.wrapper ul li.active a
{
	color:#003d60;
}

Auf den Seiten wie „About Us“ oder „Contact Us“ klappt es perfekt. Aber bei Woocommerce ist es stark verschoben. habt ihr eine Idee wie ich es da auch so hinbekomme? und wie ich es auf die Produktseite hinbekomme?

Dieses Thema wurde geändert vor 3 Jahren, 11 Monaten von assv.
Dieses Thema wurde geändert vor 3 Jahren, 11 Monaten von Hans-Gerd Gerhards. Grund: Formatierung als Code
Dieses Thema wurde geändert vor 3 Jahren, 11 Monaten von Hans-Gerd Gerhards.
Dieses Thema wurde geändert vor 3 Jahren, 11 Monaten von Bego Mario Garde. Grund: Bitte Code entsprechend formatieren

Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]

Ansicht von 3 Antworten - 1 bis 3 (von insgesamt 3)

Moderator Bego Mario Garde
(@pixolin)

vor 3 Jahren, 11 Monaten
Das ist mit den wenigen Angaben etwas schwer nachzuvollziehen – hast du eine ganze HTML-Datei inklusive Header in ein Template eingefügt? Wie sieht das komplette Template aus? Außerdem hast du diverse Zeilenumbrüche <br> eingefügt, die zusätzliche Abstände erzeugen:
```
<div class="page-description"><p><br>
<br>
<br>
	<meta charset="UTF-8"><br>
	<title>Breadcrumbs</title><br>
	<script src="https://kit.fontawesome.com/a85a8c66b0.js"></script>
	<link rel="stylesheet" href="styles.css">
<br>
</p>
<div class="wrapper">
```
Was sollen Meta-Tag und Titel im Document-<body>?
Thread-Starter assv
(@assv)

vor 3 Jahren, 11 Monaten

Oh sorry das hatte ich zur Übersicht und der hat das in </br> umgewandelt. Habe es jetzt rausgenommen… jetzt ist es zwar besser aber immernoch verschoben. Ich habe die HTML datei nicht explizit im Header eingebaut sondern, wenn man auf „alle Seiten“ geht und da eine auswählt und auf „bearbeiten“. Dort kann man dann ganz oben Html Code eingeben und es war nur das Stück was ich da oben gezeigt habe.

zu body: Ehm ich bin kein profi darin, ich habe das Beipiel hierraus: https://www.youtube.com/watch?v=Xo36UHG7idQ&list=RDCMUCtVM2RthR4aC6o7dzySmExA&start_radio=1

Im Endeffekt habe ich dieses Youtubebeispiel angewendet

Moderator Bego Mario Garde
(@pixolin)

vor 3 Jahren, 11 Monaten

Dort kann man dann ganz oben Html Code eingeben …

Das scheint dann eine Besonderheit deines Themes zu sein. Bei gekauften Themes können wir dir nicht weiterhelfen, weil sie uns nicht zur Verfügung stehen. Sprich im Zweifelsfall mal mit dem Entwickler, wobei die bei individuellen Anpassungen eher zurückhaltend sind.

(Aber ganz ehrlich: bei einem Shop hast du soviel zu tun, dass ich mich mit solchen Details erst gar nicht so lange aufhalten würde.)

Ansicht von 3 Antworten - 1 bis 3 (von insgesamt 3)

Das Thema „eigenen Breadcrumb einfügen (HTML+CSS)“ ist für neue Antworten geschlossen.

eigenen Breadcrumb einfügen (HTML+CSS)

Themen-Schlagwörter

Ansichten