How to make bootstrap collapse menu with toggle function in desktop

Question

I am trying to recreate a mobile menu in desktop version, using bootstrap and its toggle functionality.

Now, I have this in desktop:

And I've tried to get something like this in desktop (because I already have it in mobile but I want the same in desktop):

The problem is that very time I try to place the button to the right, it always rolls to the left-center and the options are not displayed even changing the value of position in css.

The code that I have so far is the following:

.pen .navbar-toggle {
    border: none;
    background: transparent !important;
}

.pen .navbar-toggle:hover {
    background: transparent !important;
}

.pen .navbar-toggle .icon-bar {
    width: 22px;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
}

/* ANIMATED X */
.navbar-toggle.x .icon-bar:nth-of-type(1) {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform-origin: 10% 10%;
    -ms-transform-origin: 10% 10%;
    transform-origin: 10% 10%;
}

.navbar-toggle.x .icon-bar:nth-of-type(2) {
    opacity: 0;
    filter: alpha(opacity=0);
}

.navbar-toggle.x .icon-bar:nth-of-type(3) {
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: 10% 90%;
    -ms-transform-origin: 10% 90%;
    transform-origin: 10% 90%;
}

/* ANIMATED X COLLAPSED */
.navbar-toggle.x.collapsed .icon-bar:nth-of-type(1) {
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
}

.navbar-toggle.x.collapsed .icon-bar:nth-of-type(2) {
    opacity: 1;
    filter: alpha(opacity=100);
}

.navbar-toggle.x.collapsed .icon-bar:nth-of-type(3) {
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
}
/* END ANIMATED X */

/* ANIMATED RIGHT ARROW */
.navbar-toggle.rarr.collapsed .icon-bar:nth-of-type(1) {
    transform: translate3d(0,0,0) rotate(0deg);
    transform-origin: right top;
    width: 22px;
}

.navbar-toggle.rarr.collapsed .icon-bar:nth-of-type(2) {
    transform: translate3d(0,0,0) rotate(0deg);
}

.navbar-toggle.rarr.collapsed .icon-bar:nth-of-type(3) {
    transform: translate3d(0,0,0) rotate(0deg);
    transform-origin: right bottom;
    width: 22px;
}

.navbar-toggle.rarr .icon-bar:nth-of-type(1) {
    transform: translate3d(11px,6px,0) rotate(45deg);
    transform-origin: right top;
    width: 11px;
}

.navbar-toggle.rarr .icon-bar:nth-of-type(2) {
    /* transform: scale(0.75); */;
}

.navbar-toggle.rarr .icon-bar:nth-of-type(3) {
    transform: translate3d(11px,-6px,0) rotate(-45deg);
    transform-origin: right bottom;
    width: 11px;
}
/* END ANIMATED RIGHT ARROW */

/* ANIMATED LEFT ARROW */
.navbar-toggle.larr.collapsed .icon-bar:nth-of-type(1) {
    transform: translate3d(0,0,0) rotate(0deg);
    width: 22px;
}

.navbar-toggle.larr.collapsed .icon-bar:nth-of-type(2) {
    transform: translate3d(0,0,0) rotate(0deg);
}

.navbar-toggle.larr.collapsed .icon-bar:nth-of-type(3) {
    transform: translate3d(0,0,0) rotate(0deg);
    width: 22px;
}

.navbar-toggle.larr .icon-bar:nth-of-type(1) {
    transform: translate3d(0px,6px,0) rotate(45deg);
    transform-origin: left top;
    width: 11px;
}

.navbar-toggle.larr .icon-bar:nth-of-type(3) {
    transform: translate3d(0px,-6px,0) rotate(-45deg);
    transform-origin: left bottom;
    width: 11px;
}
/* END ANIMATED LEFT ARROW */

/* ANIMATED UP ARROW */
.navbar-toggle.uarr.collapsed .icon-bar:nth-of-type(1) {
    transform: translate3d(0,0,0) rotate(0deg);
    width: 22px;
}

.navbar-toggle.uarr.collapsed .icon-bar:nth-of-type(2) {
    transform: translate3d(0,0,0) rotate(0deg);
}

.navbar-toggle.uarr.collapsed .icon-bar:nth-of-type(3) {
    transform: translate3d(0,0,0) rotate(0deg);
    width: 22px;
}

.navbar-toggle.uarr .icon-bar:nth-of-type(1) {
    transform: translate3d(1px,0,0) rotate(-45deg);
    transform-origin: center center;
    width: 11px;
}

.navbar-toggle.uarr .icon-bar:nth-of-type(2) {
    transform: rotate(-90deg);
    transform-origin: center center;
}

.navbar-toggle.uarr .icon-bar:nth-of-type(3) {
    transform: translate3d(0px,-14px,0) rotate(-135deg);
    transform-origin: right top;
    width: 11px;
}
/* END ANIMATED UP ARROW */

/* ANIMATED PLUS */
.navbar-toggle.plus.collapsed .icon-bar:nth-of-type(1) {
    transform: translate3d(0,0,0) rotate(0deg);
}

.navbar-toggle.plus.collapsed .icon-bar:nth-of-type(2) {
    transform: translate3d(0,0,0) rotate(0deg);
}

.navbar-toggle.plus.collapsed .icon-bar:nth-of-type(3) {
    transform: translate3d(0,0,0) rotate(0deg);
}

.navbar-toggle.plus .icon-bar:nth-of-type(1) {
    transform: translate3d(0px,6px,0) rotate(90deg);
    transform-origin: center center;
}

.navbar-toggle.plus .icon-bar:nth-of-type(3) {
    transform: translate3d(0px,-6px,0) rotate(-90deg);
    transform-origin: center center;
}
/* END ANIMATED PLUS */

/* ANIMATED MINUS */
.navbar-toggle.minus.collapsed .icon-bar:nth-of-type(1) {
    transform: translate3d(0,0,0) rotate(0deg);
}

.navbar-toggle.minus.collapsed .icon-bar:nth-of-type(2) {
    transform: translate3d(0,0,0) rotate(0deg);
}

.navbar-toggle.minus.collapsed .icon-bar:nth-of-type(3) {
    transform: translate3d(0,0,0) rotate(0deg);
}

.navbar-toggle.minus .icon-bar:nth-of-type(1) {
    transform: translate3d(0,6px,0);
}

.navbar-toggle.minus .icon-bar:nth-of-type(3) {
    transform: translate3d(0,-6px,0);
}
/* END ANIMATED MINUS */

/* FORCE NAVBAR-TOGGLE */

.pen .navbar-header {
    float: none;
}

.pen .navbar-toggle {
    display: block;
}

.pen .navbar-collapse {
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}

.pen .navbar-collapse.collapse {
    display: none !important;
}

.pen .navbar-nav {
    float: none !important;
    margin: 7.5px -15px;
}

.pen .navbar-nav > li {
    float: none;
}

.pen .navbar-nav > li > a {
    padding-top: 10px;
    padding-bottom: 10px;
}

.pen .navbar-collapse.collapse.in {
    display: block !important;
}

.pen .navbar-brand {
  font-size:14px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container-fluid">
<div class="row">

<div class="col-lg-12" style="background-color: black; color: white;">

<nav class="navbar navbar-default" role="navigation" style="background-color: black; color: white;">
<div class="navbar-header">
<button type="button" class="navbar-toggle x collapsed" data-toggle="collapse" data-target="#navbar-collapse-x" style="display: block;">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#top">.here logo_website.</a>
</div>

<div class="collapse navbar-collapse" id="navbar-collapse-x">
<ul class="nav navbar-nav navbar-right">
<li data-toggle="collapse" data-target="#navbar-collapse.in"><a href="#top" style="color: white; font-size: 20px;">HOME</a></li>
<li data-toggle="collapse" data-target="#navbar-collapse.in"><a href="#top" style="color: white; font-size: 20px;">CONTACT</a></li>
<li class=dropdown>
                 <a href=# data-toggle=dropdown class=dropdown-toggle style="color: white; font-size: 20px;">SERVICES</a>
                  <ul role=menu class=dropdown-menu>
                   <li><a tabindex=-1 href=Websites.html>WEB-DESIGN</a></li>
                    <li class=divider></li>
                     <li><a tabindex=-1 href=Mobile.html>WEB-DEVELOPMENT</a></li>                                       
                            </ul>
                        </li>
</ul>
</div><!-- .navbar-collapse -->
</nav>

</div>

</div>
</div>

I hope you can help me solve this problem and finally have a desktop menu similar to the mobile menu. In fact I would like that same menu to be maintained in both mobile and desktop. It's what I'm trying to get.

Answer 1

I hope it will help: Bootstrap Navigation Bar

<html lang="en"><head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.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.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar bg-dark navbar-dark">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#collapsibleNavbar" aria-expanded="false">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="navbar-collapse collapse" id="collapsibleNavbar" style="">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="javascript:void(0)">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="javascript:void(0)">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="javascript:void(0)">Link</a>
      </li>    
    </ul>
  </div>  
</nav>
<br>

<div class="container-fluid">
  <h3>Collapsible Navbar</h3>
  <p>Click on th button in the top right corner to reveal the navigation links.</p>
</div>





</body></html>