Check out this image showcasing my issue.
Do you notice how the hamburger/menu icon gets bumped down to the next line? My goal is to have the text wrap to the next line instead, while keeping the menu button and header text aligned side by side. The title text and menu are set to float left and right respectively.
This seems like a confusing problem (as I'm trying to achieve the opposite), and I can't figure out how the white space property might help in this scenario.
The only solution that somewhat works is putting a max width on the title, but that ends up messing with the layout at certain screen sizes.
I haven't added any custom css to these elements, just using what Bootstrap 3 provides
Here's the markup (pretty much copied from the new Bootstrap 3 docs):
<div class="navbar navbar-default">
<div class = "navbar-header">
<a class = "navbar-brand" href="<%= request.protocol + request.host_with_port%>/weather"> Weather </a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<form id="search" class="navbar-form navbar-right form-inline" method="get" action="/weather">
<div class="form-group">
<input type="text" placeholder="Search for your city or zip" class="form-control" id = "searchbox" name="search">
</div>
<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"/></button>
</form>
</div>
`