M4 Thema Menü Farbe des aktiven Links

[struggle]

Hallo,
meine Seite hatte ich mit Mobirise 3 und einem M3 Thema gebaut.
Menüfarbe beispielweise weiß, hover rot und Farbe der aktiven Seite auch rot.
Für den jeweils aktiven Link wurde im HTML der jeweils aktiven Seite eine entsprechende Änderung vorgenommen.
Jetzt baue ich die Seite unter Mobirise 4 mit einem M4 Thema nach. Hover ist eingestellt. Aber wie mache ich das jetzt mit der aktiven Linkfarbe. HTML sieht unter M4 Thema ganz anders aus.

Vorgegangen bin ich beim M3 Thema immer so:

aus

Code: Alles auswählen

<a class="nav-link link mbr-editable-menue-item"href=index.html">

habe ich

Code: Alles auswählen

<a class="nav-link link mbr-editable-menue-item"style="color:#ea2744;"href="index.html">

gemacht.

Ich würde mir gerne die Mühe machen, das auf jeder aktiven Seite zu ändern.
Ich bitte um Hilfe
Gruss
struggle

[Tommy Herrmann]

Moin,

schreibe mal die Style-Anweisung mit Leerzeichen an das <a> Tag - also ehere so:

Code: Alles auswählen

<a class="nav-link link mbr-editable-menue-item" style="color:#ea2744;" href=index.html">

... wenn Du das so mit dem Thema "Mobirise3" gemacht hast, dann kannst Du das doch ganz genauso auch mit dem Thema "Mobirise4" oder irgendeinem anderen Thema machen.

Ich habe das so ähnlich beispielhaft hier getan, obwohl ich das eigentlich als etwas veraltet und überflüssig empfinde und auch als ziemlich unnötigen Arbeitsaufwand:

https://www.mobirise-tutorials.com/Test ... ungen.html

Ich habe es dort etwas anders über eine selbst erstellte "CSS Class" gemacht und dann immer dem aktiven Menü für den Hintergrund meine class="activeMenu" gegeben.

Ich habe hier auch die aktive Navigation gelb markiert, indem ich in der ersten Zeile der Navi, im <section> Tag das Attribut global entfernt habe und an dem jeweiligen Seiten-Link, anstelle der Bootstrap class="text-white", die class="text-success" (gelb) vergeben habe.

Das ist aber auch nichts anderes als Du mit der direkten Style-Anweisung getan hast.

Wichtig ist nur, dass das Attribut "global" weg kommt, denn das würde die Änderungen sonst eben - global - also auf allen Seiten machen.

[struggle]

Hallo Tommy,
zunächst besten Dank für die Antwort. Mein Problem ist, daß ich nur "Bahnhof" verstehe
Ich kenne mich mit HTML und CSS nicht aus. In den letzten Tagen habe ich zu meinem Problem das Internet durchforstet, etliche Beiträge (auch von Dir) gelesen und irgendwann war ich komplett "kirre".
Ich weiß nicht, was ich genau wohin schreiben muss. Dabei würde ich gerne die von Dir genannte Vorgehensweise mit der selbst erstellten CSS Class nutzen.
Besteht evtl. die Möglichkeit, mir das an Hand einer kompletten Zeile zu zeigen, wie das vorher und hinterher aussehen muss? Ich will es auch verstehen!
Ich schätze Deine Bemühungen, anderen zu helfen sehr und kann nur erahnen, wie viel Zeit Du dafür opferst. Vielleicht kann ich irgendwann im Forum was zurückgeben.
Gruss
struggle

[Tommy Herrmann]

Da Mobirise ja jede Menge unterschiedlicher Navigationsleisten hat, müsstest Du mir mal das Thema nennen, das Du gerade benutzt.

Auch ein Link, zu der bestehenden Webseite von Dir, wäre sehr hilfreich.

Du willst doch nur die Farbe des aktiven Menüs geändert haben - habe ich das richtig verstanden?

[struggle]

Hallo Tommy,
mit einem Link kann ich noch nicht dienen, bin noch im Aufbau. Ich habe unter Mobirise 4 kein Thema erworben, es ist wohl das Standardthema. Die Hoverfarbe ist "'#ea2744" (rot) und die gleiche Farbe soll der aktive Link erhalten.

Das soll die Sete werden:

Hier schon mal der HTML-Code:

Code: Alles auswählen

<section class="menu" group="Menu" plugins="DropDown, TouchSwipe" always-top global not-draggable once="menu" position-absolute>

    <mbr-parameters>
    <!-- Block parameters controls (Blue "Gear" panel) -->
        <input type="checkbox" title="Logo Anzeigen" name="showLogo" checked>
        <input type="range" title="Logo-Größe" inline name="logoSize" min="3.8" max="8" step="0.1" value="7.1" condition="showLogo">
        <input type="checkbox" title="Markenname Anzeigen" name="showBrand">
        <input type="checkbox" title="Menüpunkte Anzeigen" name="showItems" checked>
        <input type="color" title="Hover-Farbe" name="itemsHoverColor" value="#ea2744" condition="showItems">
        <input type="checkbox" title="Buttons Anzeigen" name="showButtons">
        <input type="checkbox" title="Sticky" name="sticky" checked>
        <input type="checkbox" title="Eingeklappt" name="collapsed">
        <input type="checkbox" title="Durchsichtig" name="transparent">
        <input type="color" title="Hamburger-Farbe" name="hamburgerColor" value="#efefef">
        <input type="color" title="Hintergrundfarbe" name="menuBgColor" value="#0f2d4e">
    <!-- End block parameters -->
    </mbr-parameters>

    <nav class="navbar navbar-expand beta-menu navbar-dropdown align-items-center" mbr-class="{
        'navbar-fixed-top': sticky,
        'navbar-toggleable-sm': !collapsed,
        'collapsed': collapsed,
        'bg-color transparent': transparent
        }">
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <div class="hamburger">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
        </button>
        <div class="menu-logo">
            <div class="navbar-brand">
                <span mbr-if="showLogo" class="navbar-logo">
                    <a href="https://mobirise.com">
                        <img src="file:///C:/Users/pc/AppData/Local/Mobirise.com/Mobirise/projects/project-2018-09-02_132501/assets/images/immologo01-164x54.png" alt="Mobirise" mbr-style="{'height': logoSize + 'rem'}" title>
                    </a>
                </span>
                <span mbr-if="showBrand" mbr-buttons mbr-theme-style="display-4" class="navbar-caption-wrap" data-toolbar="-mbrBtnMove,-mbrBtnAdd,-mbrBtnRemove">
                    <a class="navbar-caption text-black" data-app-selector=".navbar-caption" href="https://mobirise.com">
                        MOBIRISE
                    </a>
                </span>
            </div>
        </div>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul mbr-if="showItems" mbr-menu class="navbar-nav nav-dropdown" mbr-theme-style="display-4" mbr-class="{'nav-right': !showButtons,
                'navbar-nav-top-padding': isPublish && !showBrand && !showLogo}"><li class="nav-item">
                    <a class="nav-link link text-warning" href="index.html" data-app-selector=".nav-link,.dropdown-item" data-app-placeholder="Type Text">PROJEKT</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link link text-warning" href="page1.html" data-app-selector=".nav-link,.dropdown-item" data-app-placeholder="Type Text">FORUM</a>
                </li><li class="nav-item"><a class="nav-link link text-warning" href="page2.html" data-app-selector=".nav-link,.dropdown-item" data-app-placeholder="Type Text">KONTAKT</a></li><li class="nav-item"><a class="nav-link link text-warning" href="page3.html" data-app-selector=".nav-link,.dropdown-item" data-app-placeholder="Type Text">NEWS</a></li><li class="nav-item"><a class="nav-link link text-warning" href="page4.html" data-app-selector=".nav-link,.dropdown-item" data-app-placeholder="Type Text">GÄSTEBUCH</a></li><li class="nav-item"><a class="nav-link link text-warning" href="page5.html" data-app-selector=".nav-link,.dropdown-item" data-app-placeholder="Type Text">LUSTIGES</a></li></ul>
            <div mbr-if="showButtons" mbr-buttons mbr-theme-style="display-4" class="navbar-buttons mbr-section-btn"><a class="btn btn-sm btn-primary" href="tel:+1-234-567-8901" data-app-placeholder="Type Text">
                    <span class="btn-icon mbri-mobile mbr-iconfont mbr-iconfont-btn" data-app-selector=".mbr-iconfont-btn">
                    </span>
                    +1-234-567-8901
                </a></div>
        </div>
    </nav>
</section>

und vom CSS:

Code: Alles auswählen

.navbar {
  background: @menuBgColor;
  transition: none;
  min-height: 77px;
  padding: .5rem 0;
}
.navbar-dropdown.bg-color.transparent.opened {
  background: @menuBgColor;
}
a {
  font-style: normal;
}
.nav-item {
  & span {
    padding-right: 0.4em;
    line-height: 0.5em;
    vertical-align: text-bottom;
    position: relative;
    text-decoration: none;
  }
  & a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.7rem 0 !important;
    margin: 0rem .65rem !important;
  }
}
.nav-item:focus, .nav-link:focus {
  outline: none;
}
.btn {
  padding: 0.4rem 1.5rem;
  .mbr-iconfont {
    font-size: 1.6rem;
  }
  display: inline-flex;
  align-items: center;
}
.menu-logo {
  margin-right: auto;
  .navbar-brand {
    display: flex;
    margin-left: 5rem;
    padding: 0;
    transition: padding .2s;
    min-height: 3.8rem;
    align-items: center;
    .navbar-caption-wrap {
      display: flex;
      -webkit-align-items: center;
      align-items: center;
      word-break: break-word;
      min-width: 7rem;
      margin: .3rem 0;
      .navbar-caption {
        line-height: 1.2rem !important;
        padding-right: 2rem;
      }
    }
    .navbar-logo {
      font-size: 4rem;
      transition: font-size 0.25s;
      & img {
        display: flex;
      }
      .mbr-iconfont {
        transition: font-size 0.25s;
      }
    }
  }
}
.navbar-toggleable-sm .navbar-collapse {
  justify-content: flex-end;
  -webkit-justify-content: flex-end;
  padding-right: 5rem;
  width: auto;
  .navbar-nav {
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    padding-left: 0;
    .nav-item {
      -webkit-align-self: center;
      align-self: center;
    }
  }
  .navbar-buttons {
    padding-left: 0;
    padding-bottom: 0;
  }
}
.dropdown {
  .dropdown-menu {
    background: @menuBgColor;
    display: none;
    position: absolute;
    min-width: 5rem;
    padding-top: 1.4rem;
    padding-bottom: 1.4rem;
    text-align: left;
    .dropdown-item {
      width: auto;
      padding: 0.235em 1.5385em 0.235em 1.5385em !important;
      &::after {
        right: 0.5rem;
      }
    }
    .dropdown-submenu {
      margin: 0;
    }
  }
  &.open > .dropdown-menu {
    display: block;
  }
}
.navbar-toggleable-sm {
  &.opened:after {
    position: absolute;
    width: 100vw;
    height: 100vh;
    content: '';
    background-color: rgba(0, 0, 0, 0.1);
    left: 0;
    bottom: 0;
    transform: translateY(100%);
    -webkit-transform: translateY(100%);
    z-index: 1000;
  }
}
.navbar.navbar-short {
  min-height: 60px;
  transition: all .2s;
  & .navbar-toggler-right {
    top: 20px;
  }
  & .navbar-logo a {
    font-size: 2.5rem !important;
    line-height: 2.5rem;
    transition: font-size 0.25s;
    & .mbr-iconfont {
      font-size: 2.5rem !important;
    }
    & img {
      height: 3rem !important;
    }
  }
  & .navbar-brand {
    min-height: 3rem;
  }
}
button.navbar-toggler {
  width: 31px;
  height: 18px;
  cursor: pointer;
  transition: all .2s;
  top: 1.5rem;
  right: 1rem;
  &:focus {
    outline: none;
  }
  .hamburger span {
    position: absolute;
    right: 0;
    width: 30px;
    height: 2px;
    border-right: 5px;
    background-color: @hamburgerColor;
    &:nth-child(1) {
      top: 0;
      transition: all .2s;
    }
    &:nth-child(2) {
      top: 8px;
      transition: all .15s;
    }
    &:nth-child(3) {
      top: 8px;
      transition: all .15s;
    }
    &:nth-child(4) {
      top: 16px;
      transition: all .2s;
    }
  }
}
nav.opened .hamburger span {
  &:nth-child(1) {
    top: 8px;
    width: 0;
    opacity: 0;
    right: 50%;
    transition: all .2s;
  }
  &:nth-child(2) {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    transition: all .25s;
  }
  &:nth-child(3) {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    transition: all .25s;
  }
  &:nth-child(4) {
    top: 8px;
    width: 0;
    opacity: 0;
    right: 50%;
    transition: all .2s;
  }
}
.collapsed {
  &.navbar-expand {
    flex-direction: column;
  }
  .btn {
    display: flex;
  }
  .navbar-collapse {
    display: none !important;
    padding-right: 0 !important;
    &.collapsing,&.show {
      display: block !important;
      .navbar-nav {
        display: block;
        text-align: center;
        .nav-item {
          clear: both;
          & when (@showButtons = false) {
            &:last-child {
              margin-bottom: 1rem;
            }
          }
        }
      }
      .navbar-buttons {
        text-align: center;
        &:last-child {
          margin-bottom: 1rem;
        }
      }
    }
  }
  button.navbar-toggler {
    display: block;
  }
  .navbar-brand {
    margin-left: 1rem !important;
  }
  .navbar-toggleable-sm {
    flex-direction: column;
    -webkit-flex-direction: column;
  }
  .dropdown {
    .dropdown-menu {
      width: 100%;
      text-align: center;
      position: relative;
      opacity: 0;
      display: block;
      height: 0;
      visibility: hidden;
      padding: 0;
      transition-duration: .5s;
      transition-property: opacity,padding,height;
    }
    &.open > .dropdown-menu {
      position: relative;
      opacity: 1;
      height: auto;
      padding: 1.4rem 0;
      visibility: visible;
    }
    .dropdown-submenu {
      left: 0;
      text-align: center;
      width: 100%;
    }
    .dropdown-toggle[data-toggle="dropdown-submenu"]::after {
      margin-top: 0;
      position: inherit;
      right: 0;
      top: 50%;
      display: inline-block;
      width: 0;
      height: 0;
      margin-left: .3em;
      vertical-align: middle;
      content: "";
      border-top: .30em solid;
      border-right: .30em solid transparent;
      border-left: .30em solid transparent;
    }
  }
}
@media (max-width: 991px) {
  &.navbar-expand {
    flex-direction: column;
  }
  img {
    height: 3.8rem !important;
  }
  .btn {
    display: flex;
  }
  button.navbar-toggler {
    display: block;
  }
  .navbar-brand {
    margin-left: 1rem !important;
  }
  .navbar-toggleable-sm {
    flex-direction: column;
    -webkit-flex-direction: column;
  }
  .navbar-collapse {
    display: none !important;
    padding-right: 0 !important;
    &.collapsing,&.show {
      display: block !important;
      .navbar-nav {
        display: block;
        text-align: center;
        .nav-item {
          clear: both;
          & when (@showButtons = false) {
            &:last-child {
              margin-bottom: 1rem;
            }
          }
        }
      }
      .navbar-buttons {
        text-align: center;
        &:last-child {
          margin-bottom: 1rem;
        }
      }
    }
  }
  .dropdown {
    .dropdown-menu {
      width: 100%;
      text-align: center;
      position: relative;
      opacity: 0;
      display: block;
      height: 0;
      visibility: hidden;
      padding: 0;
      transition-duration: .5s;
      transition-property: opacity,padding,height;
    }
    &.open > .dropdown-menu {
      position: relative;
      opacity: 1;
      height: auto;
      padding: 1.4rem 0;
      visibility: visible;
    }
    .dropdown-submenu {
      left: 0;
      text-align: center;
      width: 100%;
    }
    .dropdown-toggle[data-toggle="dropdown-submenu"]::after {
      margin-top: 0;
      position: inherit;
      right: 0;
      top: 50%;
      display: inline-block;
      width: 0;
      height: 0;
      margin-left: .3em;
      vertical-align: middle;
      content: "";
      border-top: .30em solid;
      border-right: .30em solid transparent;
      border-left: .30em solid transparent;
    }
  }
}
@media (min-width: 767px) {
  .menu-logo {
    flex-shrink: 0;
  }
}
.navbar-collapse {
  flex-basis: auto;
}
.nav-link:hover, .dropdown-item:hover {
  color: @itemsHoverColor !important;
}

Gruß
struggle

[Tommy Herrmann]

Leider habe ich heute null Zeit mehr ...

... ich gucke morgen genauer.

Eigentlich muss nur das "global" raus:

<section class="menu" group="Menu" plugins="DropDown, TouchSwipe" always-top global not-draggable once="menu" position-absolute>

... und dann machst Du den Style für die Farbe wie bei Deinem "Mobirise3" da auf jeder einzelnen Seite an den aktiven Link ran ...

Schreibe mir dann bis morgen ob Du schon etwas unternommen hast.

[struggle]

Hallo Tommy,
das "global" kann ich natürlich entfernen
Aber genau das folgende krieg ich nicht hin:

... und dann machst Du den Style für die Farbe wie bei Deinem "Mobirise3" da auf jeder einzelnen Seite an den aktiven Link ran ...

Unter Mobirise 3 sieht das HTML völlig anders aus. Gib mir doch bitte ein Beispiel, wie ich im vorherigen Beitrag geschrieben habe. Wenn Du gerade keine Zeit hast, vielleicht später. Im Alter wird man geduldig
Gruß
struggle

[Tommy Herrmann]

Moin,

also - ganz genau wie gestern schon kurz erwähnt. Hier mal bei einem Standard-Thema "Mobirise4":

1) zunächst das Attribut:

global

im "Code Editor" der Menüleiste (Navi) löschen, damit auf jeder einzelnen Seite ein eigener Code für die Navi gilt.


2) dann habe ich hier an das jeweilige <a> Tag </a> (Link) in der Navi diese Style-Anweisung geschrieben, die man natürlich beliebig erweitern oder ergänzen kann:

style="color: red!important; font-weight: bold;"

Zum Verständnis:

Die Anweisung:

!important

hinter der Farbe Rot war hier notwendig, da Bootstrap selbst ein !important (wichtig) gesetzt hat und dann die Farbe nur so überschreibbar ist.

Als CSS-Class würde es z.B. so aussehen - was eigentlich besser und zu bevorzugen wäre. Wie Du so eine Class nennst ist vollkommen egal, bitte keine Sonder- oder Leerzeichen und immer mit Kleinbuchstaben anfangen. Ich habe sie hier class="meineNavi" genannt:

.meineNavi {
color: red!important;
font-weight: bold;
}

Dann schreibe ich dass auf jeder Seite entsprechend an das <a> Tag </a> dran, hier also als Beispiel an "Startseite" und am Dropdown würde ich das dann an "Weitere" schreiben.

Startseite als direkte Style-Anweisung:

<a class="nav-link link text-black" href="index.html" data-app-selector=".nav-link,.dropdown-item" data-app-placeholder="Type Text" aria-expanded="false" style="color: red!important; font-weight: bold;">Startseite</a>

Startseite als CSS-Class (besser) - das schreibe ich in die bereits vorhandene Class mit rein:

<a class="nav-link link text-black meineNavi" href="index.html" data-app-selector=".nav-link,.dropdown-item" data-app-placeholder="Type Text" aria-expanded="false">Startseite</a>


Style Anweisung im Code "Startseite" - leicht markiert mit Maus:

oder CSS-Class im Code "Startseite". Die Class schreibt man dann in den Bereich "CSS Editor" (unten):

Ergebnis "Startseite":

Style Anweisung im Code "Weitere":

Ergebnis "Weitere":

[struggle]

Hallo Tommy,
ganz ganz vielen Dank. Mit den ausführlichen Erklärungen sollte sogar ich es hinbekommen . Ich gebe dann Rückmeldung.

Gruss struggle

[Tommy Herrmann]

Du - frage was immer Du nicht verstehst oder nicht hin bekommst. Kein Thema - ich helfe sehr gerne, wann immer ich es kann.

[struggle]

Es hat funktoniert

Zunächst habe ich "global" entfernt und dann das hier:

Code: Alles auswählen

<a class="nav-link link text-warning" href="page1.html" data-app-selector=".nav-link,.dropdown-item" data-app-placeholder="Type Text" >PROJEKT</a>

mit dem hier:

Code: Alles auswählen

 style="color: red!important;"

ergänzt und dann sah es so aus:

Code: Alles auswählen

<a class="nav-link link text-warning" href="index.html" data-app-selector=".nav-link,.dropdown-item" data-app-placeholder="Type Text" style="color: red!important;">PROJEKT</a>

Vielen Dank noch mal

PS: Bei einer Testseite werde ich mich noch mit der Ausführung über den Weg CSS beschäftigen

[Tommy Herrmann]

Moin,

na bestens - und ja - ein Test-Projekt sollte man mindestens haben und da kann man sich dann austoben.

Sollte mal was ganz schief laufen, kann man den letzten Zustand über die von Mobirise automatisch erstellten Sicherungen (Projekt-History) ja ganz einfach wieder herstellen.