How to make menu with language dropdown and phone link using Bootstrap 4 and navbar-toggler?

user_9492878 0
Viewed 12722

.phone-link {
    border-radius: 25px;
    background-color: lightblue;
    color: #ffffff;
    padding: 15px 25px;
}

.navbar-nav {
    margin-right: 40px;
}

.navbar-nav .nav-item {
    padding: 25px;
}


@media (max-width: 999px) {
    .phone-link {
        display: none;
    }
}
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"
        crossorigin="anonymous">


    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
        crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.2.1/css/flag-icon.min.css">
    
    
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    
    <div class="container">
        <nav class="navbar navbar-expand-lg navbar-light bg-light rounded ">
            <a class="navbar-brand" href="#"><img class='img-fluid' src="http://www.clker.com/cliparts/J/3/1/I/n/T/twitter-icon-th.png"
                    alt=""></a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample09"
                aria-controls="navbarsExample09" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarsExample09">
                <ul class="navbar-nav w-100 justify-content-end">
                    <li class="nav-item">
                        <a class="nav-link" href="#">Link</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Link</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Link</a>
                    </li>
                </ul>
            </div>
            <div class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown09" data-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="false"><span class="flag-icon flag-icon-us"> </span>
                    English</a>
                <div class="dropdown-menu" aria-labelledby="dropdown09">
                    <a class="dropdown-item" href="#fr"><span class="flag-icon flag-icon-fr"> </span> French</a>
                    <a class="dropdown-item" href="#it"><span class="flag-icon flag-icon-it"> </span> Italian</a>
                    <a class="dropdown-item" href="#ru"><span class="flag-icon flag-icon-ru"> </span> Russian</a>
                </div>
            </div>
            <div class='phone-link'>
                <a href="tel:12-12-12-12"><i class="fas fa-phone fa-rotate-90"></i>12 12 12 12</a>
            </div>
        </nav>
    </div>

How to make that language dropdown+phone link will be always on the right side or center and toggler on center or right side (depends where it will fit to the project). After clicking toggler button the menu should appear and language dropdown+phone link will stay in their position (right or center) not below the menu ? enter image description here

navbar bootstrap-4 header drop-down-menu css
1 Answers

I changed the HTML a little. But, The biggest part is the positioning of the language button is being manipulated so that the default bootstrap can run without recoding the css. The Hamburger menu is on the right so I moved it to the left of the menu using position: absolute; and right: 100px;

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"
crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.2.1/css/flag-icon.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<style type="text/css">
 .phone-link {
  border-radius: 25px;
  background-color: lightblue;
  color: #ffffff;
  padding: 15px 25px;
 }

 .navbar-nav {
  margin-right: 40px;
 }

 .navbar-nav .nav-item {
  padding: 25px;
 }


 @media (max-width: 999px) {
  .phone-link {
   display: none;
  }
 }

 .dropdown.language {
  position: absolute; 
  right: 200px; 
  width: auto;
  top: 35px;
 }
 @media (max-width: 991px) {
  .dropdown.language {
   right: 100px;
   position: absolute; top: 10px;
  }
 }
</style>


<nav class="navbar navbar-expand-lg navbar-light bg-light">
 <a class="navbar-brand" href="#">
  <img src="https://getbootstrap.com/docs/4.2/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">
 </a>
 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>

 </button>
 <div class="collapse navbar-collapse" id="navbarNavDropdown">
  <ul class="navbar-nav">
   <li class="nav-item active">
    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
     Dropdown link
    </a>
    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
     <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>

 <div class='phone-link'>
  <a href="tel:12-12-12-12"><i class="fas fa-phone fa-rotate-90"></i>12 12 12 12</a>
 </div>
 <div class="dropdown language">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
   <span class="flag-icon flag-icon-us"></span> English
  </button>
  <div class="dropdown-menu dropdown-menu-right text-right language">
   <a class="dropdown-item" href="#fr"><span class="flag-icon flag-icon-fr"> </span> French</a>
   <a class="dropdown-item" href="#it"><span class="flag-icon flag-icon-it"> </span> Italian</a>
   <a class="dropdown-item" href="#ru"><span class="flag-icon flag-icon-ru"> </span> Russian</a>
  </div>
 </div>
</nav>

user_42794960
Related