Bootstrap - Right align collapse-button in Navbar

lord_haffi

Well-Known Member
c-b Experte
#1
Tach Leute,

Im Zuge des Studiums muss ich nun meine eigene Website bauen. Bootstrap ist glücklicherweise gestattet :) Da das für mich Neuland ist, tu ich mich da etwas schwer. Und so blöd es auch klingt, ich bekomme dieses Problem irgendwie nicht gelöst...
1555264987416.png
Ich will den Collapse-button (Hamburger) rechts haben. Hab's zuerst mit 'nem einfachen margin-left: auto; versucht. Komischerweise funktioniert das nicht. Wenn ich aber statt auto z.B. 5rem schreibe, macht der das. Um das ganze noch zu toppen: Ich habe es aber schon mit genau der Methode geschafft, Navigation-Links nach rechts zu setzen:
1555265350209.png
Ob vielleicht margin-left: auto; nur einmal funktioniert, auch wenn der Button und die Navigation-Links nicht gleichzeitig da sein können? Hab probiert, das bei den Navigation-Links wegzulassen und nur bei dem Button zu setzen. Das Ergebnis war ernüchternd.
Vielleicht könnt ihr mich ja erleuchten, glaube ja immernoch, dass ich nur etwas richtig blödes vergessen habe :)

HTML:
<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Wissenschaft einfach erklärt</title>
        <link rel="icon" href="images/logo_atom.png" type="image/x-icon">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
        <link rel="stylesheet" href="css/style.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    </head>
    <body class="theme-color" data-spy="scroll" data-target=".navbar" data-offset="50">
        <nav class="navbar navbar-dark navbar-dark-custom navbar-expand-sm bg-dark fixed-top" role="navigation"><!--navbar-expand-sm -->
            <div class="navbar-header">
                <a class="navbar-brand logo rounded-lg" href="#home">
                    <img src="images/logo_atom.png" alt="Logo" style="width:30px;">
                </a>
                <button class="navbar-toggler navbar-toggler-custom" type="button" data-toggle="collapse" data-target="#collapsibleNavbar" aria-controls="collapsibleNavbar" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
            </div>
            <div class="collapse navbar-collapse" id="collapsibleNavbar">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item">
                        <a class="nav-link nav-link-custom" href="#articles">Artikel</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link nav-link-custom" href="#terms">Begriffe</a>
                    </li>
                </ul>
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link nav-link-custom" href="#">Katalog</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link nav-link-custom" href="#">Glossar</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link nav-link-custom dropdown-toggle" href="#" id="navbarmore" data-toggle="dropdown">Mehr</a>
                        <div class="dropdown-menu dropdown-menu-right bg-dark">
                            <a class="dropdown-item nav-link-custom" href="#">Über mich</a>
                        </div>
                    </li>
                </ul>
            </div> 
        </nav>
    </body>
</html>
CSS:
:root {
    --theme-color: #00b9ad;
    --theme-color-light: #1afff0;
    --theme-color-dark: #00665f;
}

.navbar-dark .navbar-nav .nav-link-custom {
    color: var(--theme-color) !important;
    text-transform: uppercase;
    letter-spacing: 0.1rem;
    padding: 0.5rem 1rem;
}
.navbar-dark .navbar-nav .nav-link-custom:hover {
    color: var(--theme-color-light) !important;
    background-color: transparent;
}
.navbar-dark .navbar-nav .nav-link-custom:active {
    color: var(--theme-color-light) !important;
    background-color: var(--theme-color-dark);
}
.nav-item.active .nav-item-custom {
    color: red !important;
}

.navbar-dark-custom {
    padding: 0 0.5rem;
}

.navbar-toggler-custom.navbar-toggler {
    margin-left: auto;
    border-color: var(--theme-color);
}
.navbar-toggler-custom .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0,185,173, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

a.logo {
    padding: 0.5rem;
}
Für generelle Verbesserungsvorschläge bin ich natürlich auch immer dankbar :)

Mfg

lord_haffi
 

asc

Well-Known Member
c-b Experte
#2
CSS:
.navbar-header {
  width: 100%;
  display: flex;
}

@media (min-width: 576px) {
  .navbar-header {
    width: auto;
  }
}
Blöd nur, dass du da jetzt 576px hardcoded hast. Wüsste da aber auf die Schnelle auch keine andere Lösung außer ggf. mit SCSS zu arbeiten um den SM-Breakpoint zu nutzen (ist eine Variable) statt den Wert hard-zu-coden (was ein Wort :D)

Würde dann so aussehen:
CSS:
.navbar-header {
  width: 100%;
  display: flex;
}

@include breakpoint-up(sm) {
  .navbar-header {
    width: auto;
  }
}
Aber die Bootstrap Toolchain (vor allem für SCSS) aufzusetzen ist nicht so geil und lohnt sich für so kleine Sachen in der Regel eher nicht.
Falls du dich trotzdem dazu entscheidest: Willkommen in der NPM Dependency-Hell!
 

lord_haffi

Well-Known Member
c-b Experte
#3
Blöd nur, dass du da jetzt 576px hardcoded hast.
Inwiefern ist das denn ein Problem? Der sm-Breakpoint ist doch auch immer bei 576px, dann macht das doch kaum einen Unterschied, oder nicht?

Ich verstehe auch nicht so ganz, warum mir das alles kaputt macht :confused: Das @media-Dingen wird ja eh nur berücksichtigt, wenn mein Button nicht angezeigt wird. Sprich, mein Header sollte auf width: 100% eingestellt sein. Abgesehen davon scheint es aber auch keinen Unterschied zu machen, wie ich da die width beim navbar-header ändere, das Ergebnis bleibt immer das gleiche...
Diese @include-Anweisung sagt mir auch leider gar nichts, wie gesagt, bin ein Frischling ^^
 

lord_haffi

Well-Known Member
c-b Experte
#5
OHHH, das war 'ne Lösung! Dachte, du hättest da 'nen Ausschnitt aus Bootstrap gezeigt, ich war richtig verwirrt :oops:
Ok, das ergibt natürlich Sinn. Ich danke dir :)

Btw, die Farbe vom Button ist eigentlich auch grünlich und nicht weiß. Zumindest im Browser, bei Codepen irgendwie nicht (obwohl es derselbe Code ist) :confused: 'Ne Idee woran das liegen könnte? Nur eine Frage aus Interesse :)
 
Oben