eigenen Breadcrumb einfügen (HTML+CSS)
-
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 4 Jahren, 5 Monaten von .
- Dieses Thema wurde geändert vor 4 Jahren, 5 Monaten von . Grund: Formatierung als Code
- Dieses Thema wurde geändert vor 4 Jahren, 5 Monaten von .
- Dieses Thema wurde geändert vor 4 Jahren, 5 Monaten von . 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)
Ansicht von 3 Antworten – 1 bis 3 (von insgesamt 3)
- Das Thema „eigenen Breadcrumb einfügen (HTML+CSS)“ ist für neue Antworten geschlossen.