Seite 1 von 1
Dünner Schatten unter dem Menü
Verfasst: Di 7. Feb 2023, 14:30
von inno
Hallo,
wie kann ich einen leichten Schatten unter dem Menüblock setzen, damit sich das Weiss auf Weiss etwas abhebt beim Scrollen?
Viele Grüße, Inno
Re: Dünner Schatten unter dem Menü
Verfasst: Di 7. Feb 2023, 14:46
von Tommy Herrmann
Moin,
na - da müsste man eigentlich Deine Seite sehen und das Thema wissen, denn fast jede Mobirise-Menüleiste ist etwas anders.
Hier mal ein Beispiel im Thema "BistroM5":
Ich habe diese
CSS für einen schwarzen Schatten von 10px mit einer Deckkraft von 70% nach unten mal dran gemacht:
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.7);
Das sieht dann in diesem Beispiel so aus:
Code: Alles auswählen
.navbar-dropdown {
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.7);
background-color: @menuBgColor !important;
padding: 0;
& when (@sticky) {
position: fixed;
}
}
Hier mal noch ein
Schatten-Generator, der einem das Leben leichter macht:
https://html-css-js.com/css/generator/box-shadow/
Re: Dünner Schatten unter dem Menü
Verfasst: Di 7. Feb 2023, 15:50
von inno
Hallo Tommy,
vielen Dank. ich verwende gerade das FactM5 Theme und teste es gleich mal.
Grüße, Inno
Re: Dünner Schatten unter dem Menü
Verfasst: Di 7. Feb 2023, 15:53
von inno
... leider funktioniert es im Theme FactM5 nicht
Hast du noch eine Idee?
Re: Dünner Schatten unter dem Menü
Verfasst: Di 7. Feb 2023, 16:06
von Tommy Herrmann
ja - ich hatte doch geschrieben - bitte mal einen Link zu der Seite. Dann kann man in den Quellcode gucken.
Das sollte auf jeder Seite funktionieren ...
Re: Dünner Schatten unter dem Menü
Verfasst: Di 7. Feb 2023, 16:07
von inno
Dann hätte ich zum Menü noch eine Frage, leider lässt sich im Hamburger-Menü, wenn es offen die Schriftgrösse nicht anpassen, egal, ob ich Text, Menü, Title2, ... wähle. Muss ich das wo anders einstellen?
Re: Dünner Schatten unter dem Menü
Verfasst: Di 7. Feb 2023, 16:14
von Tommy Herrmann
Re: Dünner Schatten unter dem Menü
Verfasst: Di 7. Feb 2023, 16:22
von Tommy Herrmann
Das mit der
Font-Size (Schriftgröße) steht hier:
Dort steht in der 6. Anweisung (von oben) der
class="nav-link":
font-size: 90px !important;
Ich habe das unten im Screenshot mal geändert auf 20px:
font-size: 20px !important;
Code: Alles auswählen
.nav-link {
justify-content: center !important;
width: fit-content;
max-width: 100%;
margin: 0 auto !important;
padding: 0 0 10px !important;
font-size: 90px !important;
line-height: 1 !important;
@media (min-width: 768px) {
background: linear-gradient(to right, @primaryColor, @primaryColor 50%, currentColor 50%, currentColor 100%) !important;
background-position: right !important;
background-size: 200% 100% !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
}
transition: .3s all;
&:hover {
color: @primaryColor;
@media (min-width: 768px) {
background-position: left !important;
color: currentColor !important;
}
}
Diese "Font-Size" steht hier in Zeile 496 vom "CSS Editor":
Font-Size (Schriftgröße) hier geändert von 90px auf 20px - obwohl natürlich diese große Schrift in der Navi genau zu diesem Design von diesem Thema passt. Die zu stark zu verkleinern ist für mein Empfinden ein Bruch vom Design. Irgendwie so als würde man den Motor von einem Speed-Boot in einen Raddampfer einbauen
Re: Dünner Schatten unter dem Menü
Verfasst: Di 7. Feb 2023, 18:10
von inno
1000-Dank!
Funktioniert alles PERFEKT!
