Dünner Schatten unter dem Menü

[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

[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/

[inno]

Hallo Tommy,

vielen Dank. ich verwende gerade das FactM5 Theme und teste es gleich mal.

Grüße, Inno

[inno]

... leider funktioniert es im Theme FactM5 nicht
Hast du noch eine Idee?

[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 ...

[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?

[Tommy Herrmann]

Gucke mal:

[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

[inno]

1000-Dank!
Funktioniert alles PERFEKT!