Brand-Name im Menü nicht responsiv

[Briddylou]

Hallo,

mein dienstliches Projekt für die Uni-Abteilung ist weitgehend fertig. https://madland-meeting.de Leider habe ich jetzt erst festgestellt, dass auf dem Handy der Titel/Brand-Name in der Navigationsleiste abgeschnitten wird. Sieht dann so oder ähnlich aus:

MAdLand Annual Meeting 2024 sollte das heißen. Auf'm Smartphone wird das mit allen Browsern abgeschnitten, auf'm Tablet ist das vom Browser abhängig. Wie kriege ich das hin, dass auf allen kleinen Bildschirmen der Titel komplett zu sehen ist?
Ich habe im Forum was über Media-Anweisungen gefunden, weiß aber nicht, wie ich das anwenden muss und wo genau das hin muss.

Der Menüblock müsste der zweizeilige Luxury M4 sein.
Hier ist der Code:

Code: Alles auswählen

<mbr-parameters>
        <header>Size</header>
        <input type="checkbox" title="Show Logo" name="showLogo" checked>
        <input type="range" title="Logo Size" inline name="logoSize" min="1.8" max="8" step="0.1" value="8" condition="showLogo">
        <header>Show/Hide</header>
        <input type="checkbox" title="Brand Name" name="showBrand" checked>
        <input type="checkbox" title="Icons" name="showIcons">
        <input type="range" inline title="Social Items" name="menuItems" min="1" max="6" step="1" value="4" condition="showIcons">
        <input type="range" inline title="Social Items" name="menuItems2" min="1" max="6" step="1" value="2" condition="showIcons">
        <input type="color" title="Items Hover Color" name="itemsHoverColor" value="#c1c1c1" condition="showItems">
        <header>Additional</header>
        <input type="checkbox" title="Sticky" name="sticky" checked>
        <input type="checkbox" title="Collapsed" name="collapsed">
        <header>Color</header>
        <input type="color" title="Hamburger Color" name="hamburgerColor" value="#283e2b">
        <input type="color" title="Dropdown Menu Color" name="dropdownColor" value="#d0dcd1">
        <input type="color" title="Background Color" name="menuBgColor" value="#f7fdf3">
    </mbr-parameters>

    <nav class="navbar navbar-dropdown" mbr-class="{'navbar-fixed-top':sticky,
                'navbar-expand-lg':!collapsed,
                'collapsed':collapsed}">
        <div class="social-block" mbr-if="showIcons">
            <div class="social" mbr-list mbr-list-grow="menuItems">
                <a href="#"><span mbr-icon class="icon1 mbr-iconfont socicon socicon-facebook"></span></a>
                <a href="#"><span mbr-icon class="icon1 mbr-iconfont socicon socicon-twitter"></span></a>
                <a href="#"><span mbr-icon class="icon1 mbr-iconfont socicon socicon-instagram"></span></a>
                <a href="#"><span mbr-icon class="icon1 mbr-iconfont socicon socicon-whatsapp"></span></a>
            </div>
            <div class="social-2" mbr-list mbr-list-grow="menuItems2">
                <a href="#"><span mbr-icon class="icon1 mbr-iconfont socicon mobi-mbri-phone mobi-mbri"></span></a>
                <a href="#"><span mbr-icon class="icon1 mbr-iconfont socicon mobi-mbri-letter mobi-mbri"></span></a>
            </div>
        </div>
        <div class="navbar-brand" mbr-if="showLogo || showBrand">
            <span mbr-if="showLogo" class="navbar-logo">
                <a href="index.html">
                    <img src="file:///F:/Homeoffice%20Uni%20G%C3%B6ttingen/Konferenz%20Organisation/MadLand%202024/HP%20MAdLand%20Annual%20Meeting/MadLand_HP_2/assets/images/madland-logo-text-400px-288x212.png" alt mbr-style="{'height': logoSize + 'rem'}">
                </a>
            </span>
            <span mbr-if="showBrand" mbr-buttons mbr-theme-style="display-1" class="navbar-caption-wrap" data-toolbar="-mbrBtnMove,-mbrBtnAdd,-mbrBtnRemove"><a class="text-secondary" data-app-selector=".navbar-caption" href="index.html" data-app-placeholder="Type Text">MAdLand Annual Meeting 2024</a></span>
        </div>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-bs-toggle="collapse" data-target="#navbarSupportedContent" data-bs-target="#navbarSupportedContent" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation" mbr-if>
            <div class="hamburger">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul 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-secondary" href="index.html" data-app-selector=".nav-link,.dropdown-item" data-app-placeholder="Type Text">HOME</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link link text-secondary" href="venue.html" data-app-selector=".nav-link,.dropdown-item" data-app-placeholder="Type Text">VENUE</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link link text-secondary text-primary" href="registration.php" data-app-selector=".nav-link,.dropdown-item" data-app-placeholder="Type Text">REGISTRATION</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link link text-secondary text-primary" href="abstracts.php" data-app-selector=".nav-link,.dropdown-item" data-app-placeholder="Type Text">ABSTRACT SUBMISSION</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link link text-secondary" href="program.html" data-app-selector=".nav-link,.dropdown-item" data-app-placeholder="Type Text">PROGRAM</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link link text-secondary" href="social.html" data-app-selector=".nav-link,.dropdown-item" data-app-placeholder="Type Text">SOCIAL EVENTS</a>
                </li><li class="nav-item"><a class="nav-link link text-secondary" href="contact.html" data-app-selector=".nav-link,.dropdown-item" data-app-placeholder="Type Text">CONTACT</a></li></ul>
        </div>
    </nav>
</section>

Und hier das CSS:

Code: Alles auswählen

& when (@sticky) {
  position: sticky;
  top: 0;
  z-index: 11;
}
.navbar-dropdown {
  position: relative !important;
  top: 0;
  left: 0;
  padding: 0.5rem 1rem;
  & when (@sticky) {
    position: fixed;
  }
}
@media (max-width: 991px) {
  .navbar-dropdown {
    padding: 0 1rem;
  }
}
.navbar {
  position: static !important;
  min-height: 77px;
  transition: 0.2s;
  background: @menuBgColor;
  display: flex;
  flex-direction: column;
  &.opened {
    transition: all 0.2s;
    background: @menuBgColor !important;
  }
  .dropdown-item {
    transition: all 0.2s;
    padding: 0.3rem 1.5rem;
    border-bottom: 1px solid darken(@dropdownColor, 10%);
    color: #132c70;
    background: @dropdownColor !important;
    &:hover {
      padding-left: 2rem;
    }
    &:focus {
      border {
        outline: none;
      }
    }
  }
  .navbar-collapse {
    justify-content: flex-end;
    z-index: 1;
  }
  .dropdown-menu {
    min-width: 300px;
    padding: 3px 0 0 0;
    box-shadow: 5px 5px 18px 0px rgba(217, 220, 242, 0.98);
    background: transparent !important;
    & > .dropdown-item:first-child {
      border-top: 2px solid @primaryColor;
    }
    .dropdown-submenu {
      padding-top: 0px;
    }
  }
  &.collapsed {
    &.opened {
      .dropdown-menu {
        top: 0;
      }
      @media (min-width: 992px) {
        &:not(.navbar-short) .navbar-collapse when (@showLogo) {
          max-height: (100vh - ((13 * @logoSize) / 7));
        }
      }
    }
    .dropdown-menu {
      width: auto;
      padding: 1rem 0 1rem 0;
      border-top: none !important;
      background: transparent !important;
      .dropdown-submenu {
        left: 0 !important;
      }
      .dropdown-item:after {
        right: auto;
      }
      .dropdown-toggle[data-toggle="dropdown-submenu"]:after {
        margin-left: 0.25rem;
        border-top: 0.35em solid;
        border-right: 0.35em solid transparent;
        border-left: 0.35em solid transparent;
        border-bottom: 0;
        top: 55%;
      }
    }
    .nav-dropdown .link.dropdown-toggle[aria-expanded="true"] {
      padding: 0.667em 1.667em;
    }
    .nav-dropdown .link {
      margin: 0.667em 1.2em;
    }
    ul.navbar-nav {
      li {
        margin: auto;
      }
    }
    .dropdown-menu .dropdown-item {
      padding: 0.25rem 1.5rem;
      text-align: center;
      border-bottom: none !important;
      background: transparent !important;
      color: inherit !important;
      &:first-child {
        border-top: none;
      }
    }
  }
  @media (max-width: 991px) {
    flex-direction: row;
    justify-content: space-between;
    &.opened {
      .dropdown-menu {
        top: 0;
      }
    }
    .dropdown-menu {
      width: auto;
      padding: 1rem 0 1rem 0;
      background: transparent !important;
      border-top: none !important;
      .dropdown-submenu {
        left: 0 !important;
      }
      .dropdown-item:after {
        right: auto;
      }
      .dropdown-toggle[data-toggle="dropdown-submenu"]:after {
        margin-left: 0.25rem;
        border-top: 0.35em solid;
        border-right: 0.35em solid transparent;
        border-left: 0.35em solid transparent;
        border-bottom: 0;
        top: 55%;
      }
    }
    .nav-dropdown .link.dropdown-toggle[aria-expanded="true"] {
      padding: 0.667em 1.667em;
    }
    .nav-dropdown .link {
      margin: 0.667em 1.2em;
    }
    ul.navbar-nav {
      li {
        margin: auto;
      }
    }
    .dropdown-menu .dropdown-item {
      padding: 0.25rem 1.5rem;
      text-align: center;
      border-bottom: none !important;
      background: transparent !important;
      &:first-child {
        border-top: none;
      }
    }
    .navbar-brand {
      flex-shrink: initial;
      flex-basis: auto;
      word-break: break-word;
      flex-direction: row;
      justify-content: space-between;
      margin-top: 1rem;
    }
    .navbar-toggler {
      -webkit-flex-basis: auto;
      flex-basis: auto;
    }
    .social-block {
      display: none;
    }
  }
  &.navbar-short {
    @media (max-width: 1200px) {
      min-height: 60px;
    }
    @media (min-width: 1200px) {
      min-height: 60px;
    }
    .social-block {
      top: 1rem;
    }
    .navbar-logo {
      img {
        height: 3rem !important;
        width: auto;
      }
    }
    .navbar-brand {
      padding: 0;
      margin-bottom: 0;
      height: 0px;
      opacity: 0;
      min-height: 0px;
    }
  }
}
.navbar-brand {
  & when not (@showLogo) {
    height: (@display2Size * 1rem);
  }
  & when (@showLogo) {
    height: (@logoSize * 1rem);
  }
  min-height: (@display2Size * 1rem);
  flex-shrink: 0;
  align-items: center;
  margin-right: 0;
  padding: 0;
  transition: all 0.2s;
  word-break: break-word;
  z-index: 1;
  display: flex;
  margin-bottom: 1rem;
  opacity: 1;
  .navbar-caption {
    line-height: inherit !important;
  }
  .navbar-logo a {
    outline: none;
    img {
      width: auto;
    }
  }
}
.dropdown-item.active, .dropdown-item:active {
  background-color: transparent;
}
.navbar-expand-lg .navbar-nav .nav-link {
  padding: 0;
  line-height: 1;
  letter-spacing: 1px;
}
.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: -2px 0 0 0;
      left: 100%;
    }
  }
}
.navbar .dropdown.open > .dropdown-menu {
  display: block;
}
ul.navbar-nav {
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
}
.navbar-buttons {
  text-align: center;
}
button.navbar-toggler {
  outline: none;
  width: 31px;
  height: 20px;
  cursor: pointer;
  transition: all 0.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 0.2s;
    }
    &:nth-child(2) {
      top: 8px;
      transition: all 0.2s;
    }
    &:nth-child(3) {
      top: 8px;
      transition: all 0.2s;
    }
    &:nth-child(4) {
      top: 16px;
      transition: all 0.2s;
    }
  }
}
nav.opened .hamburger span {
  &:nth-child(1) {
    top: 8px;
    width: 0;
    opacity: 0;
    right: 50%;
    transition: all 0.2s;
  }
  &:nth-child(2) {
    transform: rotate(45deg);
    transition: all 0.2s;
  }
  &:nth-child(3) {
    transform: rotate(-45deg);
    transition: all 0.2s;
  }
  &:nth-child(4) {
    top: 8px;
    width: 0;
    opacity: 0;
    right: 50%;
    transition: all 0.2s;
  }
}
a.nav-link {
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
}
.mbr-iconfont {
  font-size: 1.3rem;
  padding-right: 0.5rem;
  color: #132c70;
}
.nav-dropdown .link.dropdown-toggle[aria-expanded="true"] {
  padding: 1.667em 1.667em;
}
.nav-dropdown .link {
  margin: 1.667em 1.2em;
  font-weight: 700;
}
.nav-link:hover, .dropdown-item:hover {
  color: @itemsHoverColor !important;
}
.social-block {
  display: flex;
  justify-content: space-between;
  width: 100%;
  position: absolute;
  top: 2.5rem;
  max-width: 1300px;
  transition: 0.2s;
}
.social {
  display: flex;
  flex-direction: row;
  margin-left: 2rem;
}
.social-2 {
  display: flex;
  flex-direction: row;
  margin-right: 1.5rem;
}

Vielen Dank im Voraus für Eure Hilfe!
LG, Briddylou

[Tommy Herrmann]

Moin,

Du kannst natürlich als Brand-Beschriftung keinen meterlangen Text dort anbringen, ist doch klar, dass der am Handy nirgends passt.

Das Branding wird übrigens nicht abgeschnitten, sondern es gibt ein riesen Overflow, also einen riesen Quer-Scroller am Handy.

Entweder musst Du das kürzen auf z.B.:

MAdLand

Ich sehe keinen Grund, warum das "Annual Meeting 2024" nun da oben in der Mednüleiste und nicht z.B. im Header Block ganz oben stehen könnte

Dort kann es dann auch responsive dargestellt werden. Dort würde ich auch ein H1 Tag dazu verwenden, was viel besser für die SEO wäre.

... oder die Schrift am Handy / Tablet mit einer Media-Anweisung ganz klein machen, was dann wohl eher eine Notlösung wäre.

Dazu könntest Du mal versuchen, das in den Bereich "CSS Editor" vom Menüblock einzutragen:

Code: Alles auswählen

@media (max-width: 991px) {
    .text-secondary.display-1 {
      font-size: 10px;
    }
}

oder auch so, um es dann, bis zu einer Display-Breite von 991px, ganz auszublenden:

Code: Alles auswählen

@media (max-width: 991px) {
    .text-secondary.display-1 {
      display: none;
    }
}

[Tommy Herrmann]

… das ist zwar irgendwie Krampf - gehen sollte es aber auch mit einem einfachen <br> (break) Tag:

MAdLand<br>AnnualMeeting<br>2024

Code: Alles auswählen

<span mbr-if="showBrand" mbr-buttons mbr-theme-style="display-2" class="navbar-caption-wrap" data-toolbar=
"-mbrBtnMove,-mbrBtnAdd,-mbrBtnRemove"><a class data-app-selector=".navbar-caption" 
href="#" data-app-placeholder="Type Text">MAdLand<br>AnnualMeeting<br>2024</a></span>

Am Handy:

Am Desktop:

[Briddylou]

Moin,
Du kannst natürlich als Brand-Beschriftung keinen meterlangen Text dort anbringen, ist doch klar, dass der am Handy nirgends passt.

Hi, doch, das geht. Ich habe einen ähnlichen Menü-Block gefunden (Flora M4, glaube ich), mit dem sich der meterlange Text auf dem Smartphone wunderschön zusammenfaltet. Ich hätt ja einfach den genommen, wenn sich nicht bei der Sticky-Einstellung der Header-Block total verschoben hätte.
Dann habe ich mir die Codes von beiden Blöcken ausgedruckt und verglichen, was beim zweiten anders ist als bei dem ersten Block. Irgendwann habe ich dann die richtige Änderung erwischt.
Et voilá:

Genau so wollte ich das haben.

Geändert habe ich folgendes, falls es Euch interessiert:


Grüße
Briddylou

[Tommy Herrmann]

Moin,

prima - aber nachvollziehen kann ich das nicht

Was genau hast Du denn geändert?

Die CSS-Klassen "text-secondary" und "text-primary" sind doch lediglich Farbänderungen.

Die Originalseite von Dir erscheint aber noch immer gleich und unverändert.


Eigentlich braucht es da nur die Bootstrap class="text-wrap" und das ist alles. Hatte ich gestern gar nicht dran gedacht, dass ja Bootstrap solche Klassen auch alle hat.

Hast Du das mal probiert? Also noch an die andere Class mir dran schreiben:

<span class="navbar-caption-wrap text-wrap"><a class="text-secondary display-1" href="index.html">MAdLand Annual Meeting 2024</a></span>

https://getbootstrap.com/docs/5.0/utili ... d-overflow

[stobi_de]

Nicht in der Navbar, sondern eine Zeile tiefer im "Navbar-brand".
Scheinbar vererben sich die Klassen hier nicht nach unten.

========
- Beide Formulare sind auch nicht responsiv
- die Startseite hat den Seitentitel "Home"
- Für Google ist nichts Spezielles gemacht?

[Briddylou]

Moin,
prima - aber nachvollziehen kann ich das nicht
Was genau hast Du denn geändert?
Die CSS-Klassen "text-secondary" und "text-primary" sind doch lediglich Farbänderungen.

Moin,
naja, ich habe eigentlich nur herumprobiert. Ich habe "navbar-caption text-secondary text-primary" geschrieben statt vorher nur "text-secondary", siehe markierte Stelle im Foto.
Dann wurde der Titel zusammenklappbar aber auch fett (wie der halt im Flora-Block so ist). Die Fettschrift habe ich durch einen normalen font-weight wieder beseitigt. Läuft bei Euch Experten vermutlich unter der Überschrift "Denn sie wissen nicht, was sie tun", aber hat ja geklappt.
Nun faltet sich also der navbar-caption ein, das Logo verkleinert sich aber nicht, was mir sehr gefällt.

Die Originalseite von Dir erscheint aber noch immer gleich und unverändert.

Ja, ich weiß. Ich muss das über VPN und Remotedesktop auf den Server der Uni hochladen und hatte keine Lust, mich da überall einzuloggen (getestet hatte ich auf meinem privaten Webspace, geht schneller). Ich warte jetzt noch auf Nachricht, ob ich die Tagungsgebühr nochmal anpassen soll, bevor ich alles hochlade.