css - Bootstrap 4 - Navbar items outside the collapse -


ok have admit have struggled getting work correctly in bs3. want have navbar links outside of collapsed container stay persistent.

this have right now:

<nav class="navbar fixed-top navbar-expand-lg navbar-template">     <a class="navbar-brand" href="#">navbar</a>     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarnavdropdown">         <span class="navbar-toggler-icon"></span>     </button>     <div class="collapse navbar-collapse" id="navbarnavdropdown">         <ul class="navbar-nav ml-auto">             <li class="nav-item"><a class="nav-link" href="#">home</a></li>             <li class="nav-item"><a class="nav-link" href="#">features</a></li>             <li class="nav-item"><a class="nav-link" href="#">pricing</a></li>             <li class="nav-item dropdown">                 <a class="nav-link dropdown-toggle" href="http://example.com" id="navbardropdownmenulink" data-toggle="dropdown">dropdown link</a>                 <div class="dropdown-menu dropdown-menu-right">                     <a class="dropdown-item" href="#">action</a>                     <a class="dropdown-item" href="#">another action</a>                     <a class="dropdown-item" href="#">something else here</a>                 </div>             </li>         </ul>     </div>     <ul class="navbar-nav">         <li class="nav-item"><a class="nav-link" href="#"><span class="fa fa-facebook"></span></a></li>         <li class="nav-item"><a class="nav-link" href="#"><span class="fa fa-twitter"></span></a></li>         <li class="nav-item"><a class="nav-link" href="#"><span class="fa fa-youtube"></span></a></li>         <li class="nav-item"><a class="nav-link" href="#"><span class="fa fa-linkedin"></span></a></li>     </ul> </nav> 

enter image description here

this works until first nav in collapsed state. when collapse active looks this:

enter image description here

has found clean solution this?

the simplest way using flexbox utility classes, no css needed...

https://www.codeply.com/go/twzgiy3vgw

<nav class="navbar fixed-top navbar-light navbar-expand-lg navbar-template">     <a class="navbar-brand" href="#">navbar</a>     <div class="d-flex flex-row order-2 order-lg-3">         <ul class="navbar-nav flex-row">             <li class="nav-item"><a class="nav-link px-2" href="#"><span class="fa fa-facebook"></span></a></li>             <li class="nav-item"><a class="nav-link px-2" href="#"><span class="fa fa-twitter"></span></a></li>             <li class="nav-item"><a class="nav-link px-2" href="#"><span class="fa fa-youtube"></span></a></li>             <li class="nav-item"><a class="nav-link px-2" href="#"><span class="fa fa-linkedin"></span></a></li>         </ul>         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarnavdropdown">             <span class="navbar-toggler-icon"></span>         </button>     </div>     <div class="collapse navbar-collapse order-3 order-lg-2" id="navbarnavdropdown">         <ul class="navbar-nav ml-auto">             <li class="nav-item"><a class="nav-link" href="#">home</a></li>             <li class="nav-item"><a class="nav-link" href="#">features</a></li>             <li class="nav-item"><a class="nav-link" href="#">pricing</a></li>             <li class="nav-item dropdown">                 <a class="nav-link dropdown-toggle" href="http://example.com" id="navbardropdownmenulink" data-toggle="dropdown">dropdown link</a>                 <div class="dropdown-menu dropdown-menu-right">                     <a class="dropdown-item" href="#">action</a>                     <a class="dropdown-item" href="#">another action</a>                     <a class="dropdown-item" href="#">something else here</a>                 </div>             </li>         </ul>     </div> </nav> 

Comments

Popular posts from this blog

resizing Telegram inline keyboard -

command line - How can a Python program background itself? -

php - "cURL error 28: Resolving timed out" on Wordpress on Azure App Service on Linux -