Datenschutz Impressum

NOF-Schule | Forum

zur Schule NOF-NetObjects-Tutorials von Tommy Herrmann


Mobirise Menü Abstände
#1
Hallo,

kann mir evtl. jemand sagen wo ich mit dem Mobirise-Code-Editor
den Abstand (grün markiert) zwischen den Menüpunkten
im "Normalen" und im "Hamburger" bzw. bei dem Dropdownmenü
verändern (in diesem Fall verkleinern) kann?

Ich kann ihn irgendwie nicht finden ...

Danke und Gruss
Daniel


Angehängte Dateien
.png  Abstand_Menü.PNG (Größe: 145,19 KB / Downloads: 10)

.png  Abstand_Hamburgermenü_Dropdown.PNG (Größe: 11,01 KB / Downloads: 21)

Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#2
Hallo Daniel,

Ich habe heute keine Zeit zum Gucken. Man müsste auch das Mobirise-Thema wissen, welches Du verwendest, damit man überhaupt die Chance hat mal selbst zu gucken (so einen hohen Abstand habe ich noch nie gesehen).

Oft ist das die "line-height" (Höhe der Schrift) oder auch ein "padding" (Außenabstand). Musst Du mal in der CSS suchen.

Insgesamt möchte ich Dir aber eher empfehlen nichts an dieser Navi zu verändern, denn da kann dann schnell etwas an dem einen oder anderen Gerät schief laufen.
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#3
Hallo Thomas,

danke, für die schnelle Antwort.

Das Thema ist RestaurantM4 und das Menü ist gleich das Erste in der Auswahl und
der Abstand ist so original (habe nichts verändert)

Nach "padding" habe ich geschaut und diverse verändert und wieder zurückgesetzt,
aber noch nichts gefunden ...

Gruss
Daniel
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#4
Hallo,

habe den Menü-Code mal eingestellt:

Code:
.nav-item:focus, .nav-link:focus {
  outline: none;
}
.dropdown .dropdown-menu .dropdown-item {
  width: auto;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  &::after {
    right: 0.5rem;
  }
  .mbr-iconfont {
    margin-left: -1.8rem;
    padding-right: 1rem;
    font-size: inherit;
    &:before {
      display: inline-block;
      -webkit-transform: scale(1, 1);
      transform: scale(1, 1);
      -webkit-transition: all 0.25s ease-in-out;
      -moz-transition: all 0.25s ease-in-out;
      transition: all 0.25s ease-in-out;
    }
  }
}
.collapsed {
  .dropdown .dropdown-menu .dropdown-item {
    padding: 0.235em 1.5em !important;
    transition: none;
    margin: 0 !important;
  }
}
.navbar {
  min-height: 77px;
  transition: all .3s;
  background: @menuBgColor;
  & when (@transparent) {
    background: none;
  }
  &.opened {
    transition: all .3s;
    background: @menuBgColor !important;
  }
  .dropdown-item {
    padding: .235rem 1.5rem;
  }
  .navbar-collapse {
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    z-index: 1;
    & when not (@showItems) {
      display: none !important;
    }
  }
  &.collapsed {
    &.opened {
      .dropdown-menu {
        top: 0;
      }
      @media (min-width: 992px) {
        &:not(.navbar-short) .navbar-collapse when (@showLogo) {
          max-height: ~"calc(100vh - @{logoSize}rem - 1rem)";
        }
      }
    }
    .dropdown-menu {
      background: transparent !important;
      .dropdown-submenu {
        left: 0 !important;
      }
      .dropdown-item:after {
        right: auto;
      }
      .dropdown-toggle[data-toggle="dropdown-submenu"]:after {
        margin-left: .25rem;
        border-top: 0.35em solid;
        border-right: 0.35em solid transparent;
        border-left: 0.35em solid transparent;
        border-bottom: 0;
        top: 55%;
      }
    }
    ul.navbar-nav {
      li {
        margin: auto;
      }
    }
    .dropdown-menu .dropdown-item {
      padding: .25rem 1.5rem;
      text-align: center;
    }
    .icons-menu {
      padding-left: 0;
      padding-top: .5rem;
      padding-bottom: .5rem;
    }
  }
  @media (max-width: 991px) {
    &.opened {
      .dropdown-menu {
        top: 0;
      }
    }
    .dropdown-menu {
      background: transparent !important;
      .dropdown-submenu {
        left: 0 !important;
      }
      .dropdown-item:after {
        right: auto;
      }
      .dropdown-toggle[data-toggle="dropdown-submenu"]:after {
        margin-left: .25rem;
        border-top: 0.35em solid;
        border-right: 0.35em solid transparent;
        border-left: 0.35em solid transparent;
        border-bottom: 0;
        top: 55%;
      }
    }
    .navbar-logo {
      img {
        height: 3.8rem !important;
      }
    }
    ul.navbar-nav {
      li {
        margin: auto;
      }
    }
    .dropdown-menu .dropdown-item {
      padding: .25rem 1.5rem !important;
      text-align: center;
    }
    .navbar-brand {
      -webkit-flex-shrink: initial;
      flex-shrink: initial;
      -webkit-flex-basis: auto;
      flex-basis: auto;
      word-break: break-word;
    }
    .navbar-toggler {
      -webkit-flex-basis: auto;
      flex-basis: auto;
    }
    .icons-menu {
      padding-left: 0;
      padding-top: .5rem;
      padding-bottom: .5rem;
    }
  }
  &.navbar-short {
    background: @menuBgColor !important;
    min-height: 60px;
    .navbar-logo {
      img {
        height: 3rem !important;
      }
    }
    .navbar-brand {
      padding: 0;
    }
  }
}
.navbar-brand {
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  -webkit-align-items: center;
  align-items: center;
  margin-right: 0;
  padding: 0;
  transition: all .3s;
  word-break: break-word;
  z-index: 1;
  .navbar-caption {
    line-height: inherit !important;
  }
  .navbar-logo a {
    outline: none;
  }
}
.dropdown-item.active,.dropdown-item:active {
  background-color: transparent;
}
.navbar-expand-lg .navbar-nav .nav-link {
  padding: 0;
}
.nav-dropdown .link.dropdown-toggle {
  margin-right: 1.667em;
  &[aria-expanded="true"] {
    margin-right: 0;
    padding: 0.667em 1.667em;
  }
}
.navbar.navbar-expand-lg .dropdown {
  .dropdown-menu {
    background: @menuBgColor;
    .dropdown-submenu {
      margin: 0;
      left: 100%;
    }
  }
}
.navbar .dropdown.open > .dropdown-menu {
  display: block;
}
ul.navbar-nav {
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
.navbar-buttons {
  text-align: center;
}
button.navbar-toggler {
  outline: none;
  width: 31px;
  height: 20px;
  cursor: pointer;
  transition: all .2s;
  position: relative;
  -webkit-align-self: center;
  align-self: center;
  .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;
  }
}
.navbar-dropdown {
  padding: .5rem 1rem;
  & when (@sticky) {
    position: fixed;
  }
}
a.nav-link {
  -webkit-justify-content: center;
  justify-content: center;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
}
.mbr-iconfont {
  font-size: 1.5rem;
  padding-right: .5rem;
}
.icons-menu {
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  padding-left: 1rem;
  text-align: center;
  span {
    font-size: 20px;
    color: #232323;
  }
}
.nav-link:hover, .dropdown-item:hover, .icons-menu .mbr-iconfont:hover {
  color: @itemsHoverColor !important;
}
@media screen and (~'-ms-high-contrast: active'), (~'-ms-high-contrast: none') {
  .navbar {
    height: 77px;
    &.opened {
      height: auto;
    }
  }
}

Gruss
Daniel
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#5
In der Seiten-CSS (Static-Styles) steht:

Zitat:.nav-dropdown .link {
  padding: 0.667em 1.667em !important;
  margin: 0 !important;
}


.jpg  Static-Style.JPG (Größe: 140,36 KB / Downloads: 25)


... kopiere das mal, wie es ist, in den "Code Editor" in den Bereich "CSS Editor" (ganz unten) und ändere den ersten Padding-Wert von 0.667em (steht für Abstand oben/unten) auf meinetwegen 0.2em.

Zitat:.nav-dropdown .link {
  padding: 0.2em 1.667em !important;
  margin: 0 !important;
}

Ergebnis:


.jpg  paddding-Menu.JPG (Größe: 69,01 KB / Downloads: 17)



Du kannst das natürlich auch gleich in den Style-Einstellungen (Pinsel) bei "Static-Styles" (oberster Screenshot) ändern - nur merke es Dir dann gut ...
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#6
Hallo Thomas,

wow, super funktioniert thumbs up danke.

Gibt es so ein Baustein auch für den Abstand im
• Hamburgermenü -> Untermenü

bzw.
• "normalen" Menü
• "normalen" Menü -> Untermenü?

Gruss
Daniel
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#7
(15.03.2020, 14:59)Wepli schrieb: • "normalen" Menü
• "normalen" Menü -> Untermenü?

... nicht getestet - aber suche mal nach dieser Class im Bereich "CSS Editor" (zum Suchen Cursor dort markieren und Tasten "Strg+F" drücken):

Zitat:.dropdown-item {
      width: auto;
      padding: 0.235em 1.5385em 0.235em 1.5385em !important;
}

in meinem Beispiel ist der Abstand oben und der Abstand unten mit jeweils 0.235em eingetragen.
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#8
Die Einstellung (hier für .nav-dropdown und .link) gilt für das gesamte Menü.
.nav-item ist die Klasse für einen Menüpunkt
.nav-dropdown ist die Klasse für mehrere Menüpunkte
.link ist die Klasse für den Link im Menüpunkt

Wenn Du für das Hamburger Menü und das normale differente Einstellungen haben möchtest, musst du das über Media-Anweisungen machen!
Keine Zeit, muss Haare machen!
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#9
Hallo Martin73,

Zitat:Wenn Du für das Hamburger Menü und das normale differente Einstellungen haben möchtest, musst du das über Media-Anweisungen machen!

Nein, ich möchte keine unterschiedlichen Abstände in den verschiedenen Menüs haben,
nur das der Abstand bei allen etwas geringer ist.

Sieht schöner aus und beim Tablet rutscht es nicht unter das Logo bevor es zum Hamburger wird.

Gruss
Daniel
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#10
@Martin,

es geht aber u.a. um den Abstand zwischen den einzelnen Menüpunkten innerhalb des Dropdown und das ist die

class="dropdown-item"

https://getbootstrap.com/docs/4.0/compon...menu-items
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#11
OK, dann habe ich falsch geschaut.
Keine Zeit, muss Haare machen!
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#12
Hallo,

Habe diesen Punkt noch nicht gefunden.
Zitat:Zitat von Thomas:
.dropdown-item {
      width: auto;
      padding: 0.235em 1.5385em 0.235em 1.5385em !important;
}

Hat einer eine Idee wo ich den Abstand im "normalen" Menü bzw. Untermenü
etwas verkleinern kann?

                                            https://www.baeckerei-henke.de/testseite2/

Gruss
Daniel
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#13
Moin,

hast Du denn meinen Vorschlag schon  mal probiert???

Wenn ich das ganz unten (rechts) in den Bereich "CSS Editor" vom "Code Editor" dazu schreibe:

... erweitere ich den Abstand auf 1.1rem:

Code:
.dropdown-item {
  padding: 1.1rem 1.5rem !important;
}


.jpg  dropdown-item.jpg (Größe: 494,9 KB / Downloads: 9)


... verringere ich den Abstand auf 0.1rem:

Code:
.dropdown-item {
  padding: .1rem 1.5rem !important;
}


.jpg  dropdown-item-eng.jpg (Größe: 856,81 KB / Downloads: 8)
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#14
@Tommy: Er hat das padding schon auf 0.235rem abgesenkt!
.dropdown-item {
padding: .235rem 1.5rem !important;
}
@Daniel: Du könntest noch die Linienhöhe von derzeit 2 absenken:
.dropdown-item {
line-height: 1;
}
oder halt 1.5; oder so
Keine Zeit, muss Haare machen!
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#15
Moin,

nee - er hat nichts abgesenkt. Das ist der Default-Wert (.235rem)
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren


Möglicherweise verwandte Themen…
Thema Verfasser Antworten Ansichten Letzter Beitrag
  NOF Essentials 7.5 - Umzug zu Mobirise möglich? sputnixx23 17 690 01.02.2020, 16:09
Letzter Beitrag: Tommy Herrmann
  NOF 13 Menü fehlt plötzlich nach Upload kinesiana 4 535 08.01.2019, 17:56
Letzter Beitrag: Martin73
  Mobirise, lokale Veröffentlichung RB_BCC 3 595 07.11.2018, 17:08
Letzter Beitrag: RB_BCC
  Probleme mit Klappleisten-Menü goldi1971 6 2.312 17.12.2017, 15:08
Letzter Beitrag: barbara0701
  Mega-Menü - Pro und Contra stobi_de 4 1.937 18.06.2017, 21:09
Letzter Beitrag: Doris Rehhausen
  Mehrspaltiges Mega-Menü ? stobi_de 2 972 19.07.2016, 12:48
Letzter Beitrag: Tommy Herrmann
  Menü soll nach Seitenwechsel geöffnet bleiben stobi_de 3 1.536 16.06.2016, 07:15
Letzter Beitrag: Tommy Herrmann
  Mega Navi Menü Thomas Saake 63 22.090 01.02.2016, 07:51
Letzter Beitrag: thenninger
  Menü Leiste springt hin und her? HotteM 2 1.921 24.08.2015, 08:09
Letzter Beitrag: immergut
  Menü Buton verschwinden Wanderkarl 1 1.469 19.10.2014, 05:04
Letzter Beitrag: Tommy Herrmann



Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste
nach oben An den Anfang der Seite scrollen
NetObjects Fusion Infos, Downloads und Updates Diese Website wird durch Bot-Trap vor Spam geschützt!