[Solved] Add a quote Button to bootstrap Navigation Bar and Make it stay Permanently?

Question

1. The Free Quote Button to be forced right

I would use position: absolute; here to avoid excessive juggling with margins and paddings. This way it will always stay on the same line. This will look worse if your navbar-header and nav items are wider though than in your fiddle.

.navbar-right {
    position: absolute;
    right: 0;
}

2. At small screensizes I would like free quote button to remain to the right of the (icon bar button [mobile menu])

Put another <button> above the navbar-toggle with pull-right and visible-xs classes. This will place the button on the right side of the navbar-toggle and make it visible only on XS screen sizes.

    <div class="pull-right visible-xs free-quote"><a href="#" class="btn btn-default">Free Quote</a></div>
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
        <span class="sr-only"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button> 
    <a class="navbar-brand menulogo" href="#">
        My Site + Logo Makes This Long
    </a>

Give hidden-xs class to the other button so It won’t show up in XS screen sizes. (example in answer to number 3)

3. I don’t want the navigation bar to take up an extra line when at smaller screen size

You can show smaller button on SM screen sizes to avoid the need for navbar to expand on two lines like this (by need I mean otherwise it is more likely that navigation items and the button will overlap each other):

<div class="navbar-right hidden-xs free-quote"> 
  <a href="#" class="btn btn-xs btn-default visible-sm">Free Quote</a>
  <a href="#" class="btn btn-default hidden-sm">Free Quote</a>
</div>

I would suggest that you show logo or text only in navbar-brand on XS screen sizes so that they won’t jump to their own line when the screen size is only e.g. 320px wide.

4. Extra: Make it look nice

Give some padding and margin to those buttons to align them nicely.

.free-quote {
    padding: 9px 5px 9px 0
}
.free-quote > .btn-xs {
    margin-top: 4px;
}

Here is the fiddle: http://jsfiddle.net/z7V4F/3/

Accepted Answer