So ich habe mal in meinem Sendeplan an dem ich lokal arbeite eine richtige Boostrap-Navigation eingefügt.
d.h. Die Navigation wird richtig ordentlich als Dropdown-Menu auf Mobilen Entgeräten angezeigt.
Original Code
Code
Der Code der bei mir eingesetzt ist
Code
- <div id="wrapper" class="container">
- <div class="row">
- <nav class="navbar navbar-expand-md bg-dark navbar-dark">
- <a class="navbar-brand" href="#">Showplan Clubstream</a>
- <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
- <span class="navbar-toggler-icon"></span>
- </button>
- <div class="collapse navbar-collapse" id="collapsibleNavbar">
- <ul class="navbar-nav">
- <li class="nav-item">
- {$siteNavi}
- </li>
- </ul>
- </div>
- </nav>
- <nav class="navbar navbar-expand-sm bg-light navbar-light">
- <ul class="navbar-nav">
- <li class="nav-item">
- </li>
- </ul>
- </nav>
- <div id="content" class="col-12">
- {$siteContent}
- </div>
- <div class="col-12 footer bg-dark">{$login}</div>
- </div>
- </div>
Ihr möchtet es lieber das es wie auf dem Smartphone aussieht. Das sogenannte Collapse-Menu. Dann ist hier der Code dafür.
Code
- <div id="wrapper" class="container">
- <div class="row">
- <nav class="navbar bg-dark navbar-dark">
- <a class="navbar-brand" href="#">Navbar</a>
- <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar">
- <span class="navbar-toggler-icon"></span>
- </button>
- <div class="navbar-collapse collapse" id="collapsingNavbar">
- <ul class="navbar-nav">
- <li class="nav-item">
- {$siteNavi}
- </li>
- </ul>
- </div>
- </nav>
- <div id="content" class="col-12">
- {$siteContent}
- </div>
- <div class="col-12 footer bg-dark">{$login}</div>
- </div>
- </div>