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