Navigation Benutzer anzeigen wo er sich befindet

[Angie007]

Guten Abend,

weiß vielleicht jemand wie ich bei einer mit Contao erstellten Seite, den Link der Seite auf der sich der Besucher befindet rot markieren kann, wie hier Start: http://www.meine-webseite.de

Lieben Dank im Voraus

[tab]

Wenn das ein Contao-Navigationsmenü ist, dann hat das entsprechende <li> und das darin enthaltene <span> jeweils die Klasse "active", die du benutzen kannst, um die Farbe/Hintergrundfarbe per CSS zu setzen.

[Angie007]

Hallo, danke! Aber ich wollte erreichen das der besuchte Link während der Besucher auf der Seite ist dauerhaft markiert bleib.
Mit active wird der Link nur beim klicken markiert....
VG

[tab]

Nein, das ist nur bei der Pseudoklasse :active. Contao gibt dem Listenelement der gegenwärtigen Seite eine echte Klasse active mit. In deiner verlinkten Beispielseite scheint allerdings Bootstrap verwendet zu werden.

[mlweb]

Abgesehen davon, dass sich auf Deiner Seite die Navigation im Moment gar nicht bedienen läßt, wird hier nicht dass Standardtemplate für die Navigation benutzt. Somit gibt es keine Klasse active wie von @tab beschrieben und auch kein span, welches man ebenfalls für diesen Zweck verwenden könnte.
Was ist denn das für eine Navigation?

[mlweb]

In deiner verlinkten Beispielseite scheint allerdings Bootstrap verwendet zu werden.

Bootstrap dürfte doch eigentlich auch Klassen verwenden um so etwas zu händeln?

[tab]

Ja, aber damit kenne ich mich nicht aus und in der verlinkten Beispielwebsite funktioniert die Navigation nicht.

[lucina]

Zumindest innerhalb der Extension 'contao-bootstrap' wäre das innerhalb des nav-bootstrap-dropdown-Templates prinzipiell auch so enthalten. Wenn man das nicht nutzt dann gibt es vermutlich die Klasse auch nicht.

[tab]

In der verlinkten Website wird die Klasse "topmenu" dazu verwendet, die Hintergrundfarbe des Menüpunkts "Start" zu setzen. Aber wie gesagt, keine Ahnung, ob das dort nur die Startseite hervorheben soll oder tatsächlich die jeweils aktuelle Seite.

[mlweb]

Ja hatte ich gesehen, aber die Klasse topmenu wird nicht "mitgeführt" beim Wechsel der Seite.
Hab mal kurz in die aktuellen Bootstrap Doku geschaut. Wenn ich es richtig interpretiere wird dort genau wie in Contao die Klasse active verwendet.
Aber wie Lucina schon sagte um das in Contao einzusetzen ist es mit Sicherheit besser die entsprechende Erweiterung zu nutzen.

[Angie007]

Danke für die viele liebe Hilfe. Ja es ist eine Bootstrap Navigation.
Ich habe die Vermutung das active sowie topmenu verwendet wird. Habe es ein mal getestet, jedem Link die Klasse active gegeben, hat leider nicht geklappt???

Ich habe noch ein weiteres Problem.
Ich möchte das der gesamte Header position:fixed bekommt. Sobald ich dem Header oder Kopfteil ein fixed mit gebe funktionieren die Links nicht mehr. Hab alles durch probiert, bin ratlos??????????

<div id="kopf" class="row">
<div class="col-sm-12 col-md-12">
<div class="col-sm-12 col-md-4">
<div class="kopf-links">Detektei AsA-GUARD KG - Privatdetektei & Wirtschaftsdetektei</div>
</div>
<div class="col-sm-12 col-md-4">
<div class="kopf-mitte"><a class="brand" href="index.php">
<img src="files/logo.png" alt="Detektei Köln, Detektei Frankfurt, Detektei Karlsruhe" title="Detektei - Detektiv" /></a>
</div>
</div>

<div class="col-sm-12 col-md-4">
<div class="kopf-rechts">Kontakt: 06136 - 4083743</div>
</div>
</div>
</div>
<nav class="navbar navbar-inverse navbar-static-top">

<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Navigation ein-/ausblenden</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>

</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="topmenu">
<a href="index.php" titel="Detektei Köln, Detektei Frankfurt, Detektei Karlsruhe AsA-GUARD">Start</a>
</li>
<li>
<a href="wirtschaftsdetektei.html" titel="Detektei Köln, Detektei Frankfurt, Detektei Karlsruhe, Wirtschaftsdetektei">Wirtschaftsdetektei</a>
</li>
<li>
<a href="privatdetektei.html" titel="Detektei Köln, Detektei Frankfurt, Detektei Karlsruhe, Privatdetektei">Privatdetektei</a>
</li>

</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="sicherheitsdienste.html" titel="Detektei Köln, Sicherheitsfirma Frankfurt, Detektei Karlsruhe, Sicherheitsdienste">Sicherheitsdienste</a>
</li>
<li>
<a href="referenzen.html" titel="Detektei Köln, Detektei Frankfurt, Detektei Karlsruhe, Referenzen">Referenzen</a>
</li>
<li>
<a href="jobs.html" titel="Detektei Köln, Detektei Frankfurt, Detektei Karlsruhe, Bewerbung">Jobs</a>
</li>
<li>
<a href="kontakt.html" titel="Detektei Köln, Detektei Frankfurt, Detektei Karlsruhe, Kontakt">Kontakt </a>
</li>

</ul>

</div><!--/.nav-collapse -->
</nav>




#kopf {
width:100%;
height:35px;
top:0;
position:fixed;
background-color:#fff;
background-position:left top;
background-repeat:repeat;
z-index: 1500;
}
.kopf-mitte {
margin-right:auto;
margin-bottom:0;
margin-left:auto;
text-align:center;
}
.kopf-links {
margin-top:10px;
text-align:left;
font-size:12px;
color:#346b80;
}
.kopf-rechts {
margin-top:10px;
margin-right:-35px;
text-align:right;
font-size:12px;
color:#346b80;
}


.nav.navbar-nav.navbar-right a {
margin-right:10px;
}
#header .navbar.navbar-inverse.navbar-static-top {
width:100%;
top:35px;
position:fixed;
background-color:#346b80;
border-bottom:1 #346b80;
border-radius:0;
behavior:url('assets/css3pie/1.0.0/PIE.htc');
}
@media (max-width: 1150px) {
.navbar.navbar-inverse.navbar-static-top {
margin-top:50px;
}
}
#navbar.collapse a {
font-size:16px;
color:#fff;
}
.topmenu {
background-color:#ac0300;
}


Vielen lieben Dank für Eure Hilfe!!!
BG

[lucina]

Ohne mich jetzt durch Dein HTML und CSS wühlen zu wollen (das ist mir ein wenig zu anstrengend): Sowas geht, indem Du Klassen vergibst. Beispielsweise https://getbootstrap.com/components/#navbar-fixed-top

Grundsätzlich dürfte Bootstrap von Haus aus alles unterstützen was Du im Layout an Positionen so möchtest. Vermutlich ist es dabei hilfreich, Dir Bootstrap nur mit den benötigten Funktionen zu kompilieren. Dazu findest Du diverse Kommandozeilentools genauso wie eine Webapplikation unter https://getbootstrap.com/customize/.

[Angie007]

Das ist lieb danke. Allerdings hatte ich es zuvor mit der navbar-fixed probiert. Leider der selbe Effekt, sobald ich auch dem Kopf ein fixed mitgebe, funktioniert kein Link mehr????

[mlweb]

Der Bereich mit der ID "kopf" überdeckt die Navigation, damit ist die Navigation nicht mehr bedienbar.
Der Bereich "kopf" dehnt sich nämlich durch das darin enthaltene Bild in der Höhe aus.
Das Problem der nicht bedienbaren Navigation und die fixe Positionierung haben nichts mit Deinem ursprünglichen Problem zu tun.
Versuch mal ein Problem nach dem anderen zu lösen. Dazu würde ich die fixe Positionierung der beiden Bereiche im Kopf erst einmal rausnehmen und mich darum später kümmern.
Wie hast Du denn die Navigation erstellt?

[Angie007]

Danke Dir für Deine Mühe, so jetzt gehen die Links
Nur leider weiß ich noch nicht wie man den aktiven Link rot bekommt
Ich habe die Standard Bootstrap fixed-top Navbar als Modul erstellt, Sie im Seiten Layout eingebunden, und Sie umgestaltet.

[tab]

Irgendwas läuft da sowieso noch schief. Dass die Startseite unter index.php verlinkt ist während die anderen Seiten als .html verlinkt sind, ist zumindest ungewöhnlich. Ansonsten weiss ich leider auch nicht, wie man das bei Bootstrap hinbekommt.

[mlweb]

@tab ja stimmt.
@Angie007
Mir ist auch nicht klar wie Du Bootstrap verwendest insbesondere wie Du die Navigation einbindest.
Das müßtest Du dann mal genauer erklären.
Hast Du das Navigationstemplate angepasst oder wie genau generierst Du die Navigation?
Irgenwie habe ich das Gefühl, dass Du nur ein Modul mit HTML-Code benutzt, kann das sein?
Ich kenn mich mit Bootstrap leider auch nicht aus. Habe es weder in Contao noch sonst wo jemals benutzt.

Im Prinzip hat aber @Lucina m.E. schon den richtigen Hinweis gegeben - die Bootstrap-Erweiterung.