Greetings and good afternoon. I am currently working on developing a social networking application using the Meteor Js Stack, but I am encountering some issues with my navigation bar wrapping on mobile devices. Despite setting my dropdown to pull-right, it still wraps when clicked.
html { -webkit-text-size-adjust: none; }
.navbar-nav {
margin: 0;
float: none;
display: inline-block;
}
.navbar-nav>li {
float: none;
display: inline-block;
}
.navbar-nav>li>a {
padding-top: 15px;
padding-bottom: 15px;
}
.navbar-default{
position: fixed;
right: 0;
left: 0;
z-index: 1030;
margin-bottom: 250px;
}
.row {
margin-top:80px;
}
#submitPost {
width: 500px;
}
@media screen and (max-width: 768px) {
.row {
margin-top: 135px;
}
#submitPost {
width: 300px;
}
}<nav class="navbar navbar-default">
<div class="container">
<ul class="nav navbar-nav">
<li>
{{#linkTo route='root'}}
<span style="font-size:1.7em" class="glyphicon glyphicon-home" aria-hidden="true"></span>
{{/linkTo}}
</li>
<li>
{{#linkTo route='messages'}}
<span style="font-size:1.7em" class="glyphicon glyphicon-envelope" aria-hidden="true"></span>
{{/linkTo}}
</li>
<li>
{{#linkTo route='profile'}}
<span style="font-size:1.7em" class="glyphicon glyphicon-user" aria-hidden="true"></span>
{{/linkTo}}
</li>
<li class="dropdown">
<a style="font-size:1.7em" class="glyphicon glyphicon-edit" href="#" data-toggle="dropdown" id="navLogin"></a>
<div id="submitPost" class="dropdown-menu" style="padding:17px;">
</div>
</li>
</ul>
<ul style="font-size:1.7em" class="nav navbar-nav navbar-right">
{{> loginButtons}}
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-lg-2"></div>
<div class="col-lg-8">
{{> yield}}
</div>
<div class="col-lg-2"></div>
</div>
</div>Check out the screenshot below:
https://i.sstatic.net/5glx9.png
For additional screenshots, click here.