Menüleiste teiltransparent gestalten

[tino79]

Schönen guten Morgen,

auf meiner Seite https://tino.de würde ich gerne die Menüleiste teiltransparent gestalten, um die Schrift besser vom Hintergrund abheben zu können und auf die Umrandung der Schrift verzichten zu können.

Bisher habe ich es nur geschafft die Menüleiste teiltransparent zu bekommen, wenn dann auch die Schrift teiltransparent wurde. Soll daran liegen dass das dann immer auf alle Elemente incl. der Kinderelemente wirkt. Nun extra Container zu erstellen bin ich 1. nicht in der Lage und das würde 2. bei Mobirise wohl zu viel durcheinander geben.

Hier findet Ihr den Codeausschnitt wo ich es versucht habe:

Bei Background habe ich einfach die RGBA-Angaben gemacht, dann wurde aber wieder die komplette Navbar incl. Text teiltransparent.

Hier hatte ich her dass es so gehen soll:

https://mobirise.com/de/help/wie-man-mi ... t-264.html
Dort ungefäht 1/3 der Seite runterscrollen, Überschrift "Navbar und Button verwerfen - Deckkraft des Navbar Hintergrunds"

Ich vermute dass es daran liegt, dass die neuere Version die Hintergrundfarbe über das @menuBgColor; steuert und so dann wirklich nur der Hintergrund angesprochen wird.

Hat jemand eine Idee wie ich da den teiltransparenten Hintergrund reingebastelt bekomme? Oder wie ich das anders gelöst bekomme?

[Tommy Herrmann]

Moin,

das geht eigentlich ganz genau wie Du schon selbst geschrieben hast.

Hier mal eine Testseite mit diesem Beispiel:

https://www.mobirise-tutorials.com/Test ... estseite3/


Ich habe die Variable @menuBgColor meiner ursprünglichen Hintergrundfarbe #efefef

Code: Alles auswählen

background: @menuBgColor;

ersetzt mit (70% Deckkraft):

Code: Alles auswählen

background:rgba(239, 239, 239, 0.7);

Das sieht dann im "CSS Editor" (markiert) so aus:

Willst Du das auch im Dropdown-Menü haben (wie ich), dann musst Du etwas tiefer auch diese:

class=dropdown-menu

abändern (dann addieren allerdings die beiden halb-transparenten Flächen natürlich):

[tino79]

Danke für Deine Hilfe. Das funktioniert bei mir leider nicht. Bei mir bleibt die Navbar dann komplett transparent.
Ich denke es liegt daran, dass ich ein Menü verwende, das beim Scrollen die Transparenz ändert. Da ist noch ein "& when" drin.

Oh Mann, jetzt wo ich da nochmal nachgucke fällt es mir wie Schuppen von den Augen. Ich bin soooooooooo doof

Ich hab es ständig wie in dem Screenshot zu sehen an der falschen Stelle eingebaut. Das muss logischerweise unten hinter das "&when" und nicht hier hin:

Bei der Schriftart hier im Forum sieht übrigens das "Und-Zeichen" richtig doof aus. Wer sich also wundert was das für ein Zeichen ist, es ist ein "Und".

[Tommy Herrmann]

das muss eigentlich ganz oben in den CSS-Editor - gucke dir meinen ersten Screenshot an, dort steht es in Zeile 2.

Dann muss natürlich in den Tools von Mobirise "Farbe" und nicht "transparent" vorher gewählt worden sein.

Der Schalter "Durchsichtig" muss also "aus" geschaltet sein.

[tino79]

Bei mir fangen diese Einträge für die Navbar erst weiter unten an. Oben steht bei mir zuerst das hier:

[Tommy Herrmann]

hmm - weiß ja nicht welches Thema Du da am Wickel hast - mein Beispiel ist vom Standard-Thema "Mobirise 4".

Die Menüleisten sind ja teilweise schon unterschiedlich.

[tino79]

Ich hab immer noch das Standard M5 am Start. Menüleiste müsste davon eine Standardleiste gewesen sein. Kann auch sein dass ich die aus nem anderen Thema geklaut habe, glaube aber eher nicht da ich sie schon hatte, bevor ich das Paket gekauft habe.

Die Transparenz der Menüleiste hat mir jedoch auch nicht so recht gefallen. Ich habe es jetzt anders gelöst. Hab einfach die Schrift noch etwas aufgehellt. So sieht es insgesamt stimmiger zum Headerbild aus und man erkennt bei Mouseover auch wieder, dass es sich um Links handelt.