Collapse button on right side of navbar shows links on left side - html

Question

first post on SO so sorry if my format is horrible. Just a quick question about a custom fixed-top navbar I'm working on (and I'm very new to Bootstrap and CSS in general). It has a logo as the brand, and three links on the right, one of which is a dropdown, there's also a media query for the the links to collapse sooner (which I found here on SO!). However, when the window is re-sized, and the collapse button is clicked all of the links drop down on the complete left side like it's coming from under the brand. I just want a simple accordion style dropdown for the collapse and for the actual dropdown. Any input is very much appreciated!
Here is the HTML:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#topFixedNavbar1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
<a class="navbar-brand" href="#"><img src="images/logo.jpg" alt="Top Tier Math"></a></div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="topFixedNavbar1">
<ul class="nav navbar-nav navbar-right links">
<li>How We Work</li>
<li>Abous Us</li>
<li class="dropdown">Dropdown<span class="caret"></span>
<ul class="dropdown-menu dropdown-menu-right">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div>
I also added some css to change the height of the navbar for the logo but I doubt this is the cause. Here it is though.
.navbar-default{
height:120px;
}
.navbar-header, .navbar-brand{
height:120px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#topFixedNavbar1{
height:120px;
}
.links{
height:120px;
}
.navbar-nav li a{
line-height:90px;
}
.dropdown li a{
line-height:30px;
}
#media (max-width: 991px) {
.navbar-header {
float: none;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin: 7.5px -15px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.navbar-text {
float: none;
margin: 15px 0;
}
/* since 3.1.0 */
.navbar-collapse.collapse.in {
display: block!important;
}
.collapsing {
overflow: hidden!important;
}
}

Answer 1

I'm not sure how you want them to display but just use CSS to control the position of the dropdown.
.collapse.navbar-collapse {
width:
margin:
}
You should be able to add styles to this and it will move and change the dropdown.