Align bootstrap nav elements on the same line on collapse - html

Question

This is my first attempt on creating a bootstrap menu, and I am stuck on the following issues. I tried different solutions suggested on similar questions, but with no success ☹
When collapsed I want the text: This is a Button to next to the button “button1”.
I’ve tried playing around with inline styling but I cannot get the 2 elements to stay on one line.
If I manage to display them on the same line, how do I make the text element to have the same left margin as the dropdown element below when collapsed?
I am not sure why the text & button element do not have the same left-margin as the dropdown below them.
Here is a copy of my code: https://jsfiddle.net/b512zesq/
thanks!
.navbar {
min-height: 80px;
background: #ee4035;
border-width: 0px;
border-radius: 0px;
color: blue;
}
.navbar a {
color: white!important;
}
.navbar-brand {
padding: 0 15px;
height: 80px;
line-height: 80px;
color: white;
}
.navbar-toggle {
/* (80px - button height 34px) / 2 = 23px */
margin-top: 23px;
padding: 9px 10px !important;
}
.navbar-btn {
/* (80px - button height 34px) / 2 = 23px */
margin-top: 18px;
margin-right: 30px;
padding: 9px 9;
background: #f37736;
border-width: 0px;
height: 35px;
width: 150px;
}
.navbar-text {
margin-top: 28px;
color: white;
}
.nav.navbar-nav.navbar-right li a {
color: white;
}
.dropdown-menu {
background: #ee4035;
}
.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus {
background-color: #d6392f;
}
.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:focus {
color: #ffffff;
}
.navbar-default .navbar-nav>li>.dropdown-menu {
background-color: #ee4035;
}
.navbar-default .navbar-nav>li>.dropdown-menu>li>a {
color: #ffffff;
}
.bar-nav>li>.dropdown-menu>li>a:hover,
.navbar-default .navbar-nav>li>.dropdown-menu>li>a:focus {
color: #ffffff;
background-color: #d6392f;
}
.navbar-default .navbar-nav>li>.dropdown-menu>li>.divider {
background-color: blue;
}
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus {
color: #ffffff;
background-color: #d6392f;
}
.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:hover,
.navbar-default .navbar-nav>.open>a:focus {
color: #ffffff;
background-color: #d6392f;
}
.navbar-default .navbar-toggle {
border-color: #d6392f;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #d6392f;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #ffffff;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
border-color: #ffffff;
}
.navbar-default .navbar-link {
color: #ffffff;
}
.navbar-default .navbar-link:hover {
color: #ffffff;
}
/*RESPONSIVE*************************************************/
#media (min-width: 768px) {
.navbar-nav>li>a {
/* (80px - line-height of 27px) / 2 = 26.5px */
padding-top: 26.5px;
padding-bottom: 26.5px;
line-height: 27px;
}
}
/**END OF RESPONSIVE********************************************/
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="inline"><span class="navbar-text" style="color:white"><strong>this is a button</strong></span></li>
<li><a class="btn btn-danger navbar-btn" href="{$rlBase}/add-listing.html" role="button">button 1</a></li>
<form class="navbar-form navbar-left" style="padding:0px; border-top-width:0px;"></form>
<li class="dropdown">
<a class="dropdown-toggle" id="user-navbar" data-toggle="dropdown" href="{$rlBase}/login.html"><span class="glyphicon glyphicon-user"></span> USERNAME<span class="caret"></a>
</div>
</div>
</nav>

Answer 1

You could style your parent <ul> with display: inline-flex and put the list-item with your dropdown outside of it. That could cause compatibility issues, however.
Just give your list item a padding-left of 15px. The dropdown link has a default padding-left of 15px (you can find that in the navs.less file on line 23).