For the past few hours (a little over 3 hours, to be exact), I've been grappling with an issue that seems fairly simple. Despite scouring through various SO posts and other resources, I just can't seem to figure out the problem.
The crux of the matter is this: I'm having trouble getting the list items in my navbar to display inline (specifically to the right of the location completion partial in the HTML below).
I suspect that my CSS skills are lacking; as a beginner, I started off with Bootstrap and gradually tweaked the classes based on trial and error. The code itself functions fine, so it's likely that the issue lies in the CSS between these elements.
It's worth noting that the collapsible navbar works perfectly, and when it collapses due to resolution constraints, the navbar button aligns inline. It's only when the list items appear on the non-collapsed navbar that they fail to show up inline.
I hope the provided code gives you enough insight into this issue.
Thank you for any help!
The HTML for the navbar:
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"> </span>
<span class="icon-bar"> </span>
<span class="icon-bar"> </span>
</button>
<!-- Additional HTML content -->
</div>
</div>
</div>
The HTML/code for the partial called within the navbar HTML:
<div class="gplacesboxshow">
<input id="locationSearchField" class="locationSearchField" type="text" placeholder="Enter a place" size="50", value="<%= location_name %>">
<!-- Additional HTML content -->
</div>
<!-- Additional HTML content -->
<div id="map-canvas" style="width: 1%;"></div>
The CSS rules for the navbar and partial:
.navbar .nav.pull-right {
float: right;
margin-right: 0;
}
.navbar .nav.showpostnav {
float: right;
margin-right: 0;
padding: 8px 7px 7px 0;
}
/* More CSS rules */
#locationSearchField.locationSearchField {
display: inline-block;
margin: 2px 5px 0 0;
width: 150px;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
padding-left: 2px;
}
#locationSearchField {
display: block;
margin: auto;
width: 250px;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
}